vue，vue-cli，vue脚手架，webpack 说明，vscode，安装与使用，注意

说明

vue：数据驱动，mvvm，ioc，。。。

vue-cli：快速搭建 vue的web项目，即vue脚手架

webpack：利用es6的import，export 等，实现vue组件化，

vscode：微软推出的小

 

安装

1.下载并安装nodejs，，，，

    （忘了要不要配环境变量path），测试方法，打开cmd，C:\Users\Administrator>node -v  回车，看到版本号，

 

2.安装vue-cli

    nodejs安装完成后，nodejs程序目录下有npm，同样在cmd，C:\Users\Administrator>npm -v  回车，可以看到版本号，

    cmd，C:\Users\Administrator>npm install -g vue-cli  回车，等待安装完，

    //它安装后目录在 C:\Users\Administrator\AppData\Roaming\npm，如下载有文件：vue，vue.cmd，vue-init，vue-init.cmd，vue-list，vue-list.cmd，文件夹：node_modules\vue-cli

    //注，cnpm是类似npm功能，是国内镜像，为了提高速度

 

3.下载到c盘，后可以移出的，它的cmd文件里面也可以编辑，如node.exe的路径等

 

4.在cmd，进入vue-cli目录，进行创建vue项目，与webpack

    C:\Users\Administrator\AppData\Roaming\npm>vue init webpack vue-test1  回车

    最后看到本目录下，有vue-test1，就是项目文件夹了，，

    测试：C:\Users\Administrator\AppData\Roaming\npm\vue-test1>npm run dev

    //一般是在localhost:8080，路径打开，，，，可以改 config\index.js，

 

5.打包，即从vue组件化的项目生成原生html,js,css等的web项目，命令：npm run build

 

6.开发工具推荐：vscode

    a.支持 终端：命令行，直接键入运行npm run dev，启动web

    b.可扩展插件，如vetur，vscode-icons，（格式化与文件夹文件图标美化）

    c.可配置保存即时重新编译正在运行的web

    d.工作区可支持多个文件夹，（相当于编辑多个web项目）

 

注意

    ，npm run dev运行的web，vue项目，有很强的格式检查，

    如，声明的变量，如果没使用，它可能就不通过，

    如，操作符，与变量或函数名间，要有空格，

    如，不允许，无意义的放空一行，

    如，注释，//后面还要有个空格再有字符，