先装好 node 装npm

持久使用淘宝镜像cnpm 

配置：npm configsetregistry https://registry.npm.taobao.org

验证：npm configgetregistry

通过cnpm使用：npm install -g cnpm --registry=https://registry.npm.taobao.org

直接使用 cnpm install ***

(如果提示 不是内部指令 需要在查找vue.cmd的路径放在path环境变量中)

全局安装 webpack

cnpm install webpack -g

全局安装vue-cli

cnpm install vue-cli -g

检测vue版本

vue -V

项目初始化 

vue init webpack +项目名称

输入命令后，会询问我们几个简单的选项，我们根据自己的需要进行填写就可以了。

Project name :项目名称 ，如果不需要更改直接回车就可以了。注意：这里不能使用大写，所以我把名称改成了vueclitest

Project description:项目描述，默认为A Vue.js project,直接回车，不用编写。

Author：作者，如果你有配置git的作者，他会读取。

Install  vue-router? 是否安装vue的路由插件，我们这里需要安装，所以选择Y

Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n，如果你是大型团队开发，最好是进行配置。

setup unit tests with  Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha，我们这里不需要，所以输入n。

Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试，我们这里不需要，所以输入n。

下载依赖包

cnpm i

跑起来

npm run dev

项目结构

几个重要的文件

package,json

scripts 里 命令行里执行的命令具体做了什么 在这里有一一对应

dependencies 里 生产环境中依赖的包 （客户要运行的）

devDependencies 开发环境中依赖的包

webpack.base.conf.js

webpack的基本配置文件

entry 入口文件

eoutput 出口文件

babelrc

es6转化为es5的配置

npm run build 打包

生成的dist目录就是打包后上传到服务器的文件

main.js 入口文件