1. Installation of vue environment
1. Install NodeJS at:http://nodejs.cn/download Download the installation, add Node to the system environment variable, open the cmd command, type npm-v to see the version number, indicating that the installation of NodeJS was successful.
Then upgrade by executing the NPM install npm-g command (sudo NPM install npm-g on Linux)
2. Taobao Mirror
After successful installation, use cnpm instead of npm command, domestic mirror, installation speed will be much faster.
3. Install webpack
Web packs are available for reference:http://www.runoob.com/w3cnote/webpack-tutorial.html
4. Install vue-cli
Install Vue Scaffold Project Initialization Tool vue-cli, -g means global installation.
5. Install Yarn
Yarn is Facebook's node.js package manager, which is faster and more efficient than NPM and can use yarn instead of npm.
Specify a Taobao mirror for yarn.
The relationship between yarn and npm is as follows:
2. vue project creation
1. Use vue-cli to generate a project, more than py-ui.
Finally, select yarn to install. Then, execute the following two commands to start the web service.
After running, the result is:
Access in browser http://localhost:8080/
The vue starts normally.
3. Install Element
Element is an open source front-end framework provided by hungry companies in China, simple and elegant.
Close the service for node.js (Ctrl+C) and install it in the py-ui directory using the command yarn add element-ui.
After installation, import element-ui into the project, add statements to main.js in py-ui directory and src directory, as shown in the following figure with the red numbers 1, 2, 3.
4. Install axios
axios is a Promise-based HTTP client for browsers and Node.js. Install using the yarn add axios command.
5. Install babel-polyfill to resolve undefined errors in Promise.
Other browsers will work, but IE will fail. Solution for "Promise undefined":
import "babel-polyfill" in main.js under src directory
6. Install SCSS
1. SCSS will be used to write page styles later, so install SCSS first. This step has a large installation pit, which is summarized below.
2.After installation, add the configuration under the rules tab of the webpack.base.conf.js file in the builde folder:
{ test: /\.scss$/, loaders: ['style','css','sass'] }
When using, set the lang to scss in the page code style tag. The following 404.vue will be shown.
7. Modify Page Routing
1. Change the name of the components directory under the src directory to views. Add pages First.vue, 404.vue.
The First.vue code is as follows:
<template> <div> <h2>Home Page</h2> <el-button type="primary" @click="testAxios()">test Axios call</el-button> </div> </template> <script> import axios from 'axios' export default { name:'First', methods:{ testAxios(){ axios.get('http://localhost:8080').then(res=>) }, } } </script>
The 404.vue code is as follows:
<template> <div> <div> <div> <h2>404</h2> <p>Sorry! The page you visited<em>Out of contact</em>La ...</p> <el-button @click="$router.go(-1)">Return to the previous page</el-button> <el-button type="primary" @click="$router.push('/')">Go to Home Page</el-button> </div> </div> </div> </template> <script> export default { name:'404' } </script> <style lang="scss"> .site-wrapper.site-page--not-found { position: absolute; top: 60px; right: 0; bottom: 0; left: 0; overflow: hidden; .site-content__wrapper { padding: 0; margin: 0; background-color: #fff; } .site-content { position: fixed; top: 15%; left: 50%; z-index: 2; padding: 30px; text-align: center; transform: translate(-50%, 0); } .not-found-title { margin: 20px 0 15px; font-size: 8em; font-weight: 500; color: rgb(55, 71, 79); } .not-found-desc { margin: 0 0 30px; font-size: 26px; text-transform: uppercase; color: rgb(118, 131, 143); > em { font-style: normal; color: #ee8145; } } .not-found-btn-gohome { margin-left: 30px; } } </style>
2.Configure Routing
Open router/index.js to add two routes corresponding to the home page and 404 pages.
import Vue from 'vue' import Router from 'vue-router' import First from '@/views/Home' //Newly added route import Lost from '@/views/404' //Newly added route Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'First', component: First }, { path: '/404', name: 'Lost', component: Lost } ] })
Execute the npm run dev command in the py-ui directory. If you find a problem, reinstall step 6, step 1, and then install Axios (cnpm install --save axios) again.