【vue2.x(五)】vue-cli脚手架

1. vue-cli简介

什么是vue-cli

​ vue官方提供的一个脚手架工具，用于初始化一个Vue项目。

vue-cli优势

​ 1）成熟的vue项目架构设计，而且会跟随vue版本的更迭而更新；

​ 2）提供了一套本地的热加载的测试服务器；

​ 3）集成了一套打包上线的方案，可使用webpack或Browserify等构建工具；

vue-cli版本发展

​ 版本详见https://github.com/vuejs/vue-cli/blob/dev/CHANGELOG.md。

​ 我们选择使用Vue CLI 4.x的版本。

vue-cli依赖node.js

​ Vue CLI 4.x 需要依赖Node.js v8.9 或更高版本 (推荐 v10 以上)

2. 安装node.js(包含npm与yarn的配置)

如何下载

​ 进入node.js官网https://nodejs.org/en/，下载LTS（长期支持稳定）版本。

​ 注意：node.js不同的版本，对操作系统有不同版本的要求。

如何安装

​ 安装路径设置为D:\software\nodejs，然后一直点击下一步即可。

如何测试是否安装成功

​ 进入cmd，执行node -v，出现版本号表示成功；

​ 安装Node.js时，Npm包管理工具也会一起安装，执行npm -v验证。

配置node.js与npm

1）在D:\software\nodejs路径中新建两个文件夹，名字分别为：node_cache 与 node_global

2）修改NPM的缓存目录和全局目录路径

在cmd中输入以下指令并执行（若不配置，后续安装的模块默认在c盘）

npm config set prefix “D:\software\nodejs\node_global”

npm config set cache “D:\software\nodejs\node_cache”

3）配置环境变量

​ 配置path环境变量，在path路径最后面添加D:\software\nodejs\node_global即可。

4）配置npm淘宝镜像（若不设置，则会导致下载速度巨慢）

npm config set registry https://registry.npmmirror.com --global

npm config set disturl https://registry.npmmirror.com/dist --global

配置yarn（与npm功能类似，可以不配置）

1）全局安装yarn

// 前面已经修改了npm的包全局的安装路径，yarn会自动安装到已经更改的路径中
npm install yarn -g
// 测试是否安装成功
yarn -v

2）修改yarn的包的全局安装和缓存路径

① 查看各种路径命令

• 查看 yarn 全局bin位置

yarn global bin

• 查看 yarn 全局安装位置

yarn global dir

• 查看 yarn 全局cache位置

yarn cache dir

② 修改路径命令（若不配置，后续安装的模块默认在c盘）

• 改变 yarn 全局bin位置

yarn config set prefix “D:\software\yarn\data”

• 改变 yarn 全局安装位置

yarn config set global-folder “D:\software\yarn\data\global”

• 改变 yarn 全局cache位置

yarn config set cache-folder “D:\software\yarn\cache”

• 改变 yarn 全局 link 位置

yarn config set link-folder "D:\software\yarn\data\link

3）配置环境变量

​配置path环境变量，在path路径最后面添加

D:\software\yarn\data\global

4）配置yarn淘宝镜像（若不设置，则会导致下载速度巨慢）

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

3. 安装vue-cli

关于旧版本

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

安装步骤

1）打开cmd，执行npm install -g @vue/cli 进行安装（时间有点长，耐心等待）。

2）安装完成后，执行命令vue -V，验证vue安装是否成功（出现版本号代表成功）

可能遇到的问题

​ 若执行命令后，提示" vue不是内部或外部命令，也不是可运行的程序或批处理文件。"

解决方法

​ 需要确认是否已经将D:\software\nodejs\node_global添加为系统环境变量。

4. vue-cli创建vue项目

创建项目

在命令行中切换到项目存储目录，创建一个名称为hello-world的项目，命令如下：

vue create hello-world

我们选择vue2.x的版本：Default ([Vue 2] babel, eslint)，很快就创建成功了。

也可以通过图形用户界面（GUI）来创建和管理项目。执行命令vue ui，会默认启动一个本地服务。

在浏览器中打开http://localhost:8000，即可创建vue项目。

5. HBuilderX配置vue环境

配置vue环境

​ 以管理员身份打开HBuilderX工具，按照如下步骤进行配置

运行项目

​ 打开hello-world项目，在终端中输入命令：npm run serve，

​ 启动成功后，浏览器输入 http://localhost:8080 访问即可。

6. 项目目录

①App.vue 用来编写待渲染的模板结构

② index.html 中需要预留一个 el 区域

③ main.js 把 App.vue 渲染到了 index.html 所预留的区域中