手把手教你使用Vue CLI搭建项目

我们实际在开发项目的时候一般不会选择向官网那样直接在html文件中引入vue，而是用vue的脚手架去搭建项目。脚手架完成了项目的编译，打包，压缩，配置，我们无需自己在手动编写webpack位置，直接使用相关的命令即可完成，真可谓是事半功倍。

 

一、想使用Vue脚手架需要先安装Node 环境。

在浏览器输入http://nodejs.cn/进入node官网，点击下载，可以看到node有各种系统的安装包，我们点击windows安装包.msi的64位进行下载，下载完双击安装包，勾选我同意，选择安装路径，然后下一步就好了。

打开cmd，输入node -v 检测是否安装成功

node -v

然后同样的在cmd输入m -v检测npm是否安装

npm -v

npm是node的包管理工具，安装node的同时直接就安装好了npm

但是国内npm的服务是被墙的，但是我们可以把npm的源设置成淘宝镜像的源，更改npm下载源可以使用以下命令

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

看到这个输出，淘宝镜像跟新成功，以后下载js模块就快多了

二、安装vue的脚手架@vue/cli

 

使用命令npm install -g @vue/cli 安装Vue脚手架

npminstall-g @vue/cli

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。

如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 卸载它。

-g代表全局安装

 

输入vue -V 检测是否安装成功

vue -V

三、创建项目

在cmd进入到你想创建项目的目录

通过命令创建项目 vue create vue-demo

vue create vue-demo

1、选择预设

你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。上下键切换，回车键确定选择。

如果你之前保存了自己的预设，这里也可以显示。自己的预设保存在当前用户主目录.vuerc文件中，可以对其进行编辑。

此处我们选择使用手动选择 manually select

 

2、选择插件

空格键选择，a全选，i反选

接下来对每一个插件进行介绍

Babel是js的编译工具，可以将我们项目中所用的js新特性编译成浏览器支持的js版本。一些es6的语法，在一些老版本的浏览器中还没有得到全面的支持（更不要说es7等更新的语法），为了防止项目运行在老版本的浏览器中报错，我们需要对我们的代码进行编译。

TypeScript是微软开发的一种开源的强类型的编程语言。是js的超级，对面向对象编程表现较好，TypeScript可以在任何浏览器、任何计算机和任何操作系统上运行，以其良好的静态类型检查等优点被越来越多的开发者所喜欢。

PWA是一种先进的理念，可以让网站像原生应用一样放在设备的主屏，支持消息推送等功能。

Router是vue的官方的路由管理器，构建vue制作单页面应用的神器。

Vuex是一个专门为vue应用程序开发的状态管理模式, 它采用集中式存储管理所有组件的公共状态, 并以相应的规则保证状态以一种可预测的方式发生变化。

CSS Pre-processors，css预处理插件有很多，目前比较流行的有less、scss、stylus等，选择less作为css的预处理插件。

Linter / Formatter插件是用来检测你代码是不是符合一些规范的（包括缩进、写法等），而且还有代码格式化的功能，我觉得对于项目开发，对于开发者良好的编码规范的养成都是有好处的。

Unit Testing 单元测试

E2E Testing 端端测试

此处我们选择

3、选择路由模式

路由插件有两种模式，一种为hash模式，另一种为history模式，这两种模式最显著的区别为hash模式下浏览器的url地址中会有#，而history模式没有，hash模式下路由切换只会变化#后面的路径。此处我们选择n即哈希模式

4、选择CSS预处理器

​css预处理插件有很多，目前比较流行的有less、scss、stylus等，选择less作为css的预处理插件。

 

5、选择插件的配置信息存放位置

你想把这些工具的配置放在哪，第一个选项为放在单独的配置文件中，第二个选项为都写在package.json文件中。我一般选第二个，存放在package.json中

6、是否保存预设

是否将以上信息保存预设方便下次创建工程时选择相同配置

如果保存预设会在当前用于目录的.vuerc文件中存储预设信息

7、创建项目成功提示

四、项目编辑器选择

可以选择HbuilderX与VSCode

二者各有有缺，哪一个都可以满足大多数需求，本教程使用Hbuilder

 

五、项目目录介绍

创建项目默认生成目录

1、node_modules 这个文件夹里面是我们项目需要的一些依赖。

2、public 静态文件夹，这个文件夹中的资源不会被编译，构建生产包的时候，会被直接拷贝一份。

3、src 项目源文件目录。

3.1、assets 是页面和组件中用到的静态资源，比如公共样式文件，字体文件，图片等，该文件夹与public的区别是：该文件夹中的资源会被webpack编译。

3.2、components 文件夹中存放我们的组件。

3.3、router 项目路由插件vue-router的配置文件。

3.4、store 项目数据状态管理器vuex的配置文件。

3.5、views 文件夹中存放我们的页面。

3.6、App.vue 这个文件是我们所有vue页面的入口组件。

3.7、main.js 是我们整个项目的入口文件。

4、.gitignore 需要git忽略的文件

5、babel.config.js babel插件的配置工具

6、package.json 项目的描述文件，包括项目名、依赖的版本、作者、命令、入口文件等信息。

7、package-lock.json 记录项目依赖中各个依赖之间的关系和版本

8、README.md 项目的说明文档

 

到此，我们的项目基本上已经搭建完了。

 

项目运行

npm run serve

项目发布

npm run build