Vue项目创建(使用Vue脚手架工具)、启动并打包部署

vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目。

1. 安装nodejs和淘宝镜像cnpm

下载安装nodejs，下载后双击按步骤安装即可。安装之后通过node命令node -v来查看是否安装成功。

npm：nodejs已经集成了npm，node安装会默认装好npm。可通过npm -v命令来查看是否安装成功。
cnpm：因为node的npm安装插件比较慢，国内建议使用淘宝镜像cnpm工具。即先使用npm安装cnpm工具：npm i -g cnpm --registry=https://registry.npm.taobao.org，然后使用cnpm来安装其他插件。可通过cnpm -v命令来查看是否安装成功。

备注：建议不要用 cnpm 安装，会有各种诡异的bug，可通过重新指定 registry 来解决 npm 安装速度慢的问题
npm install --registry=https://registry.npm.taobao.org

注意：使用Vue脚手架创建Vue项目时，node版本至少是node6，否则创建项目时会报错。

2. 安装脚手架工具vue-cli

cnpm install -g vue-cli 

安装Vue脚手架.png

3. 创建Vue项目并启动

(1) 创建一个基于 webpack 模板的项目

• 通过cd命令进入你想放置项目的文件夹，在命令窗口执行命令vue init webpack来创建vue项目，之后输入相关信息（如：项目名称、项目描述、作者、打包方式、是否使用ESLint规范代码等等，根据需要自行考虑yes还是no）即可完成创建
  
  创建项目并输入相关信息.png

• 创建成功后，项目文件目录如下所示

  
  
  项目文件目录.png

vue-test
├── build/                      # 脚本目录：webpack 编译任务配置文件:(开发环境与生产环境)
│   └── ...
├── config/                     # 配置目录
│   ├── index.js                # 项目核心配置
│   └── ...
├ ── node_module/               # 依赖的node工具包目录：项目中安装的依赖模块
├── src/                        # 源码文件目录：自己的项目文件都需要放到 src 文件夹下
│   ├── main.js                 # 程序入口JS文件
│   ├── App.vue                 # 程序入口vue组件
│   ├── components/             # 组件目录
│   │   └── ...
│   └── assets/                 # 资源文件目录：一般放一些静态资源文件
│       └── ...
├── static/                     # 静态资源文件目录 (直接拷贝到dist/static/里面)
├── test/                       # 测试文件目录
│   └── unit/                   # 单元测试
│   │   ├── specs/              # 测试规范
│   │   ├── index.js            # 测试入口文件
│   │   └── karma.conf.js       # 测试运行配置文件
│   └── e2e/                    # 端到端测试
│   │   ├── specs/              # 测试规范
│   │   ├── custom-assertions/  # 端到端测试自定义断言
│   │   ├── runner.js           # 运行测试的脚本
│   │   └── nightwatch.conf.js  # 运行测试的配置文件
├── .babelrc                    # babel 配置文件
├── .editorconfig               # 编辑配置文件
├── .eslintignore               # 
├── .eslintrc.js               # ES语法检查配置
├── .gitignore                  # 用来过滤一些版本控制的文件，比如node_modules文件夹 
├── .postcssrc.js               # 
├── index.html                  # 入口页面
├── package.json                # 项目描述文件：记载着一些命令和依赖还有简要的项目描述信息 
├── package-lock.json           #
└── README.md                   #介绍自己这个项目的，可参照 github上star多的项目。

dist : 打包输出目录，只需部署这个目录到生产环境。

(2) 安装项目依赖：在项目所在路径下，输入命令cnpm install

因为自动构建过程中已存在package.json文件，所以这里直接安装依赖就行。

(3) 启动项目（启动开发环境）：在项目所在路径下，输入命令npm run dev来启动开发环境

安装依赖并启动项目.png

备注：执行cnpm run dev命令后，浏览器会自动打开默认网址展示“欢迎页面”，若没有自动打开，原因可能是目录中config下的index.js文件中autoOpenBrowser的值是false，改为true就能自动打开了。

(4) 打开默认网址

默认网页.png

若默认网址没有加载出页面，有可能是本地的 8080 端口被占用了（默认服务启动的是本地的8080端口），可参考解决端口占用问题将占用8080端口的进程杀死，或通过修改配置文件 config>index.js里的端口号来解决。

修改默认端口号.png

4. 项目打包（打包生产环境的代码）并上线部署

项目开发完成之后，输入 npm run build 来打包生产环境的代码，打包成功会生成dist文件夹（里面有index.html文件和static文件夹）；项目上线时，只需要将 dist 文件夹放到服务器就行了。

项目打包并生成dist文件夹.png

备注：Vue项目创建(使用Vue脚手架工具)、启动并打包部署 类似 Angular项目创建(使用Angular脚手架工具)、启动到打包部署，可对比学习。