One. Installation node environment
1. Turn on the computer cmd command prompt detection of whether the installation is successful, the version number appears if the installation was successful
If the prompt is not an internal command, please refer to the following address to install
https://www.runoob.com/nodejs/nodejs-install-setup.html
2. In order to improve development efficiency, you can use Taobao Mirror:
Input: npm install -g cnpm -registry = https: //registry.npm.taobao.org, npm mirror can be installed, and then after the npm place instead of directly cnpm
check whether the installation is successful
two. Install dependencies (-g global mounting means)
Installation WebPACK
C: \ Demo> WebPACK npm install -g
Cil-install WebPACK
C: \ Demo> npm install -g WebPACK-cli
Install-cli VUE
C: \ Demo> npm install -g VUE-cli
three. You have to plug into the project location, such as c disk folder vuedemo
Operation Tip: cd ... is a return to the catalog, cd is into this folder vuedemo
four. Scaffolding loading vue-cli
My project name: wcydemo
C: \ vuedemo> VUE WebPACK wcydemo the init
(Note: This filled pit)
If there are mistakes, the basic version is not compatible with lead:
Solution: Check each version
to uninstall incompatible versions
Install the specified version of the
C: \ Users \ EDZ> npm install [email protected] -g
as to have a compatible version I tested, for reference
after the project follow the prompts to fill in information Enter:
Description:
Vue Build ==> are packaged, press Enter;
the install VUE-Router ==> if you want to install vue-router, the project will certainly be using it to Y carriage;
the use ESLint to lint your code ==> need js syntax check;
the Set up unit tests ==> unit testing tool is installed;
if Setup e2e tests with Nightwatch ==> end testing tools needed;
At this time, the project directory structure as shown below:
1, Build: directory build script
1) build scripts build.js ==> production environment;
2) Check-versions.js ==> Check npm, node.js version;
. 3) utils .js ==> Construction related utility;
4) automatically adding a prefix vue-loader.conf.js ==> css loader configured to compile and after css;
. 5) webpack.base.conf.js ==> WebPACK basic configuration ;
. 6) webpack.dev.conf.js ==> WebPACK development environment configuration;
. 7) webpack.prod.conf.js ==> WebPACK production environment configuration;
2, config: project configuration
1) dev.env.js == > development environment variables;
2) index.js ==> project profiles;
3) prod.env.js ==> production environment variable;
3, node_modules: npm loaded project dependencies module
4, src: here is we want to develop directory, basically things to do in this directory. Which contains a number of directories and files:
1) Assets: Resource Directory, placed some public js, css and pictures public. Resources here will be constructed packed WebPACK;
2) Components: Components catalog, we write it in this directory components inside;
3) router: front-end routing, routing path we need to be configured to write index.js inside;
4) App.vue: root component;
5) main.js: entrance js file;
5, static: static resource directory, third-party classes library. Will not be built WebPACK
6, index.html: Home entrance file, you can add some meta information such as
7, package.json: npm package configuration file that defines script npm project, dependencies and other information
8, README.md: project documentation, markdown format
9, .babelrc file: babel translation parameters
10, .gitignore: git upload need to ignore the configuration file
11, .postcssrc.js conversion tool css
Fives. Just built into the project running
The emergence of this means the success of
how out of operation? Ctrl + c Press Twice
six. Introducing UI Element
1. In the terminal C performs development tools: \ vuedemo \ WCY-Project> NPM the install-UI Element
2. js and css incorporated in the main.js
VII. Use less
1. Installation less
C: \ vuedemo \ WCY-Project> NPM-less less Loader --save the install-dev
3. Next find webpack.base.conf.js under bulid directory and open, find the rules under the module to write
{
the Test: /.less$/,
Loader: "!! CSS style-Loader-Loader less-Loader"
}
