vue学习（五）—vue-cli构建vue项目目录结构

• 安装node.js

下载地址：https://nodejs.org/zh-cn/download/

直接进行安装，安装完成node.js后自动帮助完成npm的安装，
查看是否完成可以到环境配置中查看。

• 查看npm是否安装成功并安装vue-cli

• 安装Vue 2 Snippets插件

• 安装淘宝镜像

npm config set registry https://registry.npm.taobao.org

在npm -v命令后显示npm安装完成时，即可安装淘宝镜像，后面的npm 可以改成cnpm执行命令

配置后可通过下面方式来验证是否成功

npm config get registry

通过cnpm使用

npm install -g cnpm --registry=https://registry.npm.taobao.org

• 查看vue-cli是否安装完成

• 构建vue项目

1、运行vue init webpack “项目名称”
2、显示Project name 目录名
3、 project description 后面可以写上描述，或者直接回车
4、Author 后面可以写作者也可以回车
5、Install vue-router? 选择Y，是否安装路由（必须y，因为后面要使用）
6、User ESLint to lint your code? 选Y
7、Setup unit tests with Karma + Mocha? 问的是否要测试 选n
8、Setup e2e tests with Nightwatch? 选n
9、等待安装…

• 项目创建完成后

• 执行提示的两个步骤

• 成功显示
  
• 浏览器显示成功页面

ok！ vue-cli完成

• 打包项目工程
  

把assetsPublicPath: '/',
改为：assetsPublicPath: './',

npm run build（cnpm run build）

打包成功后，会出现一个dist的文件夹即为上架包文件！

• 打开node服务器npm run dev