First, the preparatory work
1, download and install Node.js
Download: https: //nodejs.org/en/download/, choose the right version can be downloaded. Node.js installation is installed by default npm (package management tool).
2, enable cmd
Press Windows + R, "run" open window, enter "cmd", and press Enter to open the system comes with a command prompt.
Note: The default C drive, change your disk where the disk input D :( enter your project)
3, installation cnpm
npm package management tool Node.js is provided, because npm install the plug-in is downloaded from the server abroad, by the impact of a large network, exceptions may occur, we can use instead of the default Taobao npm npm mirror cnpm.
Method a: Installation cnpm using npm
npm install -g cnpm --registry=<a href="https://registry.npm.taobao.org" _src="https://registry.npm.taobao.org">https://registry.npm.taobao.org</a>
Note: This may cause npm and cnpm versions may be different.
Method two: with the alias command to set the alias
alias cnpm="npm --registry=https://registry.npm.taobao.org \ --cache=$HOME/.npm/.cache/cnpm \--disturl=https://npm.taobao.org/dist \ --userconfig=$HOME/.cnpmrc"
Enter cnpm -v view cnpm version to check cnpm is properly installed. If not installed properly check the system variables path is configured correctly.
Global Installation WebPACK packaging tools, instructions: npm i -g webpack
Globally installed gulp, instructions: npm i -g gulp-cli, unloading command: npm rm -g gulp
4, the installation vue-cli
Use cnpm global installation vue-cli, enter the following command in cmd (Note: "- g" means this parameter is global installed)
cnpm install –g vue-cli
Second, initialize the project
After preparation work, officially initialize the project. Select webpack as packaging tools, follow the prompts to fill in some configurations. These configurations will eventually mounted respective module and written package.json project.
1, the new project mydemo (continuing the above operation instruction input cmd inside)
vue init webpack mydemo
mydemo is the project name, the name taken their casual (no capital letters). After command input, will enter the installation phase, it requires the user to enter some information.
(* After command input, a black screen will appear the following information in sequence)
Information details:
----------------------------------------------------------------------------------------------------------------------------
Project name (vuetest)
Project name, you can specify your own, but also directly enter, the default name in parentheses.
Project description (A Vue.js project)
Project description, can also be directly hit enter, use the default name.
Author
Author can specify your own, but also directly enter.
Then let the user choose
Runtime + Compiler: recommended for most users
Plus run compile, since it has been said that the recommendation, we chose it
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere
Run only when there are already recommended to choose the first
Install vue-router? (Y/n)
Whether to install vue-router, which is the official route, use in most cases, enter here after "y" Enter.
Use ESLint to lint your code? (Y/n)
Whether ESLint management code, ESLint is a management tool style code, the code is used to uniform style, and will not affect the overall operation.
Setup unit tests with Karma + Mocha? (Y/n)
Testing whether the mounting unit.
Setup e2e tests with Nightwatch(Y/n)?
E2e test whether the installation.
----------------------------------------------------------------------------------------------------------------------------
(* Disk inside your project now has appeared to mydemo folder named )
Open the project with an editor, directory structure roughly like this.
Contents Introduction:
----------------------------------------------------------------------------------------------------------------------------
bulid
Inside is some operations file is the file when using npm run * actually performed here.
config
Configuration files, executable files need configuration information.
src
Resource files, as well as all components used pictures are placed in this folder. Simply look at this folder are what put things.
assets
Resources folder, put resources like images,
components
Components folder, write all the components are placed in this folder,
router
Routing folder, this rule determines the jump page,
App.vue
应用组件，所有自己写的组件，都是在这个组件之上运行了。
main.js
webpack入口文件。
----------------------------------------------------------------------------------------------------------------------------
1、在mydemo下安装依赖（若项目下已经有node_modules文件夹，可以忽略此项）
切换到项目目录
cd mydemo
安装模块
cnpm install
它根据package.json的配置表进行安装，安装完后会在mydemo下多一个文件夹node_modules，这里的文件对应着package.json里的配置信息。
2、运行mydemo（先切换到项目文件夹： cd mydemo 再输入 npm run dev回车）
输入命令
npm run dev
打开浏览器，在浏览器输入地址http://localhost:8080，看到如下页面，说明大功告成，一个Vue项目已经初始化完成！