VueCLI 脚手架安装与使用

一、脚手架 Vue CLI

（一）介绍

1. 使用 vue 开发大型项目时，我们需要考虑代码目录结构。项目结构和部署，热加载、代码单元测试等事情。
2. 通常我们会使用一些脚手架工具来提高开发效率。

（二）CLI 是什么

1. CLI 是 Command-Line Interface 的简写，翻译为命令行界面，俗称脚手架。
2. Vue CLI 是一个官方发布的 vue.js 项目脚手架。
3. 使用 vue-cli 可以快速搭建 Vue 开发环境以及对应的 webpack 配置。

（三）使用脚手架的必要条件

1. 首先要在电脑上安装 Node 和 NPM
2. 安装 webpack

（四）安装脚手架

​

1. 指令：npm install -g @vue/cli

   

2. 检查 CLI 版本：vue --version

   

3. 使用 npm install @vue/cli-init -g 指令拉取旧版本脚手架的模板

二、利用脚手架创建项目

（一）使用 CLI3 创建项目

1. 指令：vue create 项目名称

   • 注意：项目名称禁用中文。

   • 可能出现的问题

     

   • 第一次使用 vue 时可能出现如上图所示的警告信息，这是因为你的电脑禁止运行脚本，解决办法如下：

     • 打开 windows 搜索

       

     • 搜索 Windows PowerShell

     • 在窗口中输入指令：set-ExecutionPolicy RemoteSigned 按下回车

       

     • 在最后一行输入 Y 或 A 按下回车即可

   • 有时网络偏慢，系统返回如下提示：

     

     • 是否使用淘宝的 npm 进行安装
     • 根据个人喜好进行选择，小编比较喜欢 Node 的 npm

2. Please pick a preset 选择一个配置

   

   • 这里选择第三项 —–> 手动选择特性

3. Check the features needed for your project 检查项目所需功能

   

   • 根据需求进行选择，上下键切换选项，空格键切换选择 or 不选择，回车键确定选择

4. Where do you prefer placing config for Babel, ESLint, etc.? 选择 Babel、ESLint 等的配置文件的存放方式。

   • In dedicated config files 每个配置存放在单独文件中。

   • In package.json 将配置存放在 package.json 中。

     

5. Save this as a preset for future projects? 是否保存第一次选择

   

   • 根据需求输入 Y or N

   • 输入 Y 后弹出访问

     

   • 起一个存储的名字

6. 项目创建成功

   

7. 创建成功后，在目录中会出现刚刚创建的项目根目录（vuecli3）

8. 目录成绿色字体显示，原因是当前项目未上传，正处在暂存状态。在控制台输入指令 git commit -m “提交文件” 即可。

（二）目录结构

1. public：公共文件目录。
2. src：源代码（以后的代码文件都放在这个文件夹中）
3. .browserslistrc：浏览器相关支持情况。
4. .gitignore：Git 忽略的文件。
5. babel.config.js：ES语法转换
6. postcss.config.js：CSS相关转换

（三）运行项目

1. 在项目根目录中找到 package.json 文件，在脚本对象中有两个已配置的对象，在 serve 对象后面加入 –open 语句。

    "scripts": {
       "serve": "vue-cli-service serve --open",
       "build": "vue-cli-service build"
     },
   

2. 在终端上输入指令：npm run serve 项目会自动运行起来。

下一篇：VueRouter 路由的安装与使用