脚手架搭建vue项目框架 CLI3项目搭建查看
搭建方案
vue-cli 是一个官方发布 vue.js 项目脚手架，目的是快速创建 vue 项目。
实现步骤：
- 步骤1：安装node.js
- 步骤2：安装npm(国内推荐淘宝镜像cnpm)
- 步骤3：安装webpack
- 步骤4：安装vue脚手架
- 步骤5：创建项目
- 步骤6：运行项目
- 步骤7：编译项目
- 步骤8：创建Login界面
详细步骤
- 安装node.js
https://nodejs.org/en/download/
提示：node.js安装非常简单，直接在官网下载安装即可。
- 安装npm(国内推荐淘宝镜像cnpm)
npm install -g cnpm --registry=https://registry.npm.taobao.org
提示：npm是vue项目的包依赖管理工具，在国内直接安装npm失败的概率较高，所以我们推荐使用淘宝镜像cnpm。-g 代表全局安装，建议首次安装时加上此参数，以方便后续的项目创建。安装完成后，可以用cnpm -v这个命令来检验是否安装成功，若展示对应的版本号，则表示安装成功。另外建议从此步骤开始，尽量在纯外网环境下安装。
- 安装webpack
cnpm install webpack -g
提示：webpack相当于vue项目的包管理工具，-g 代表全局安装，建议首次安装时加上此参数，以方便后续的项目创建。
- 安装vue脚手架
sudo cnpm install vue-cli -g
提示：vue的脚手架是用来构建vue项目框架的工具，-g 代表全局安装，建议首次安装时加上此参数，以方便后续的项目创建。
- 创建项目
vue init webpack projectname
提示：projectname即是项目名称，根据实际情况填写即可，后续还有多步配置，都非常简单，按照项目的需求配置即可。另外在创建项目的过程中，可能会出现下载失败的情况，大家也不必灰心，如果出现长时间下载未完成的情况，这种情况也很正常，大胆的停止即可，然后再多尝试下载几次。或者直接cd到项目的目录下，再执行cnpm install把需要的包下载完成即可。
- Generate project in current directory?
提示：是否在本目录下安装
- Project name?
提示：项目名称
- Project description?
提示：项目描述
- Author?
提示：开发者
- Vue build standalone?
提示：编译配置，默认回车即可
- Install vue-router?
提示：是否安装vue的路由，建议yes
- Use ESLint to lint your code?
提示：是否使用ESLint代码检查工具，建议yes
- Pick an ESLint preset?
提示：选择标准的ESLint
- Set up unit tests?
提示：是否设置单元测试
- Pick a test runner?
提示：选择一个test runner，根据项目实际需要选择即可
- Setup e2e tests with Nightwatch?
提示：建议yes
- Should we run
npm installfor you after the project has been created?
提示：建议yes
运行项目
npm run dev编译项目
npm run build
VUE学习之路二 框架简介
VUE学习之路三 项目配置介绍
VUE学习之路四 创界第一个界面
