什么是Vue-CLI?

分享人：胡云鹤

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.扩展思考

6.编码实战

7.参考文献

8.更多讨论

1.背景介绍

什么是Vue-CLI?

Vue CLI(Vue Command Line Interface) 是一个基于 Vue.js 进行快速开发的完整系统，提供

  • 通过 @vue/cli 搭建交互式的项目脚手架。
  • 基于 webpack 构建，并带有合理的默认配置；
  • 可以通过项目内的配置文件进行配置；
  • 可以通过插件进行扩展
  • 一个丰富的官方插件集合，集成了前端生态中最好的工具

2.知识剖析

如何安装Vue-CLI

Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。

npm install -g @vue/cli

创建一个项目

vue create <project-name>

通过图形化界面创建项目

vue ui

3.常见问题

创建VueCLI 2.X模板

Vue CLI 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：

npm install -g @vue/cli-init

vue init webpack <project-name>

vueCLI3.0 跨域问题解决方案

这里需要我们手动配置一个文件，在项目的根目录下创建一个vue.config.js的文件，里面写入配置

module.exports = { devServer: { proxy: { '/api': { target: '<url>', changeOrigin: true }, '/foo': { target: '<other_url>'}}}}

4.解决方案

5.扩展思考

VueCLI 2.x与VueCLI3.0

项目结构变化

│ package.json ├─public │ favicon.ico │ index.html └─src │ App.vue │ main.js ├─assets │ logo.png └─components HelloWorld.vue

build哪里去了？config哪里去了？配置都消失了？

vue-cli3.0默认项目目录与2.0的相比，更精简:

  1. 移除的配置文件根目录下的，build和config等目录
  2. 移除了static文件夹，新增了public文件夹，并且index.html移动到public中
  3. 在src文件夹中新增了views文件夹，用于分类 试图组件 和 公共组件
  4. 大部分配置 都集成到 vue.config.js这里,在项目根目录下

npm run dev 改了？

在根目录的package.json里有如下命令

"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"

6.编码实战

使用VueCLI UI 创建一个Vue项目

7.参考文献

参考一 VueCLI官方文档

8.更多讨论

鸣谢

感谢大家观看