从0开始搭建Vue脚手架项目（Vue-cli）

从0开始搭建Vue脚手架项目（Vue-cli）

什么是Vue?

• Vue.js是一套构建用户界面的渐进式框架。
• Vue只关心视图层，采用自底向上增量开发的设计。
• Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。

什么是脚手架？

脚手架指已经拥有标准文件夹结构和核心功能的半成品项目。

预备工作

1.安装node.js

下载安装node.js，进入node官网。

建议安装长期支持版，其它版本可能出现意外错误，导致导致脚手架安装失败。
安装步骤很简单，只要一路next就可以了。
cmd打开命令行，输入node -v,显示版本号，即安装成功。
我们需要的npm包管理工具，是集成在node中的，所以不需要额外安装。
在命令行输入npm -v,显示版本信息，说明已经成功安装。
由于npm默认的仓库是国外的，又慢又不稳定，所以建议使用国内的淘宝镜像——cnpm。

2.安装cnpm

npm i -g cnpm --registry=http://registry.npm.taobao.org

回车等待安装完成。
命令行输入cnpm -v,显示版本信息，确认安装成功。
到此，预备工作结束。

1.安装Vue脚手架

vue-cli 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。
全局安装 vue-cli。用npm或cnpm安装反复生成脚手架项目的命令行工具：2种任选一种:
（1）用npm安装:

npm i -g @vue/cli 

（2）如果npm出错，可换成cnpm:

cnpm i -g @vue/cli

2.验证Vue是否安装成功

命令行vue -V，显示版本信息，说明安装成功。

3.创建项目

（1）找到要创建项目文件夹，在地址栏输入cmd,按下回车，在当前路径打开命令行窗口。
（2）在命令行中运行

vue create 自定义项目名称

（3）选择配置方式

Vue CLI v4.5.4
? Please pick a preset: (Use arrow keys)//请选择一个预设（使用箭头方向键选择）
> Default ([Vue 2] babel, eslint)//默认Vue2
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)//(默认Vue3，会安装babel和eslint)
  Manually select features//手动选择

这里选择手动配置，回车进入下一步：

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)//检查你的项目所需的特性，空格键选择
>(*) Babel                                 ☜(转码器，可以将ES6代码转为ES5代码)
 ( ) TypeScript                            ☜( js的超集，强类型语言)
 ( ) Progressive Web App (PWA) Support     ☜(渐进式Web应用程序)
 (*) Router                                ☜(vue-router（vue路由）)
 (*) Vuex                                  ☜(vuex（vue的状态管理模式）)
 ( ) CSS Pre-processors                    ☜(CSS 预处理器（如：less、sass）)
 ( ) Linter / Formatter                    ☜(代码风格检查和格式化（如：ESlint）)//初学者暂时不选，linter是代码质量检查工具，它会将不规范的代码也抛出成警告或错误！
 ( ) Unit Testing                          ☜(单元测试)
 ( ) E2E Testing                           ☜(集成测试)

回车进入下一步

? Choose a version of Vue.js that you want to start the project with (Use arrow keys)//选择一个版本
> 2.x
  3.x (Preview)

因为3是预览版，所以建议选2
回车进入下一步

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)//是否使用路由器的历史记录模式（N）

n,建议不选，回车进入下一步

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)//将你的配置信息放在哪里
> In dedicated config files分别放在不同的配置文件中
  In package.json//统一都放在一个package.json文件中，选择此项

回车进入下一步

? Save this as a preset for future projects? (y/N)//是否将此次设置作为将来项目的预设，n,建议不选

n,回车，脚手架就开始创建项目了。

�  Successfully created project project.//项目创建成功
�  Get started with the following commands:

 $ cd project//project是项目名称，可以自定义
 $ npm run serve

cd project，切换到项目所在目录
输入npm run serve命令运行项目。

 DONE  Compiled successfully in 5257ms   //编译成功                                                              5:38:10 ├F10: PM┤
  App running at:
  - Local:   http://localhost:8080/
  - Network: unavailable
  - 

编译成功，项目创建完成。
在浏览器地址栏输入http://localhost:8080/，回车。

恭喜你，你的项目已经成功运行了。