VUE 从搭建环境开始

1、首先安装nodejs
      建议安装12版本及以下的，否则太新的容易出现版本兼容问题。当前安装：V12.18.2

     安装淘宝镜像（cnpm）
     npm install cnpm -g --registry=https://registry.npm.taobao.org

     检验cnpm安装成功否
      cnpm -v

2、安装vue脚手架
       设置npm为淘宝镜像：
       npm config set registry http://registry.npm.taobao.org/

    ① 安装vue
         npm install vue
        

    ② 安装webpack：
        cnpm install webpack -g
        或者（cnpm install -g webpack）
       注意：webpack 4.X 开始，需要安装 webpack-cli 依赖 ,所以使用这条命令
       cnpm install webpack webpack-cli -g
 
     检验webpack安装成功否
     webpack -v

    ③ 全局安装vue-cli，在cmd中输入命令:
         npm install vue-cli -g
         或者安装淘宝版：cnpm intall vue-cli -g 

        检验vue-cli安装成功否
        vue -V（注意这里是大写的“V”）

    ④ 还需要安装webpack-dev-server(这是在启动项目时候报的，只管执行命令就是了)
        npm install webpack-dev-server --save-dev

3、创建项目
      vue init webpack projectName(项目名字-不能包含大写)

执行命令后会有几个选项，需要根据需求自行选择：

Project name ：项目名称，如果不需要就直接回车。注：此处项目名不能使用大写。
Project description：项目描述，直接回车
Author ：作者
vue build 构建方式（暂且这么解释）
两个选择（上下箭头选择，回车即为选定）
1.Runtime + Compiler:recommended for most users
(译：运行+编译：被推荐给大多数用户)
2.Runtime-only:about 6KB lighter min+gzip,but templates (or any Vue-specific HTML) are ONLY
allowed in .vue files-render functions are required elsewhere
(译：只运行大约6KB比较轻量的压缩文件，但只允许模板（或任何VUE特定HTML）。VUE文件需要在其他地方呈现函数。翻译不精准，意思大概是选择该构建方式对文件大小有要求)
这里推荐使用1选项，适合大多数用户的
install vue-router？是否安装vue的路由插件，需要就选y，否则就n（以下均遵循此方法）
Use ESLint to lint your code?是否使用ESLint检测你的代码？
（ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。）
Setup unit tests? 是否安装单元测试 
Setup e2e tests with Nightwatch(Y/n)?是否安装E2E测试框架NightWatch（E2E，也就是End To End，就是所谓的“用户真实场景”。）
Should we run 'npm install' for you after the project has been created?(译：项目创建后是否要为你运行“npm install”?这里选择包管理工具)
选项有三个
yes,use npm(使用npm)
yes,use yarn(使用yarn)
no,I will handle that myself(自己操作)
一路回车到此等待安装完毕，会提示接下来的命令行

4、安装以来，命令进入到新建的项目目录下，执行：
      npm install 

5、启动项目：
      npm  run  dev 
      启动成功会告诉你项目地址：
     
6、浏览器输入项目地址：http://localhost:8080
     

7、项目结构：
      
     build文件夹：
     
     config 文件夹：