Vue CLI

一、什么是Vue CLI

---

如果只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI.

如果在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI

• 使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。
• 如果每个项目都要手动完成这些工作，那无以效率比较低效，所以通常我们会使用一些脚手架工具来帮助完成这些事情。

CLI是什么意思?

• CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架.
• Vue CLI是一个官方发布 vue.js 项目脚手架
• 使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack(打包工具)配置
• 官网：https://cli.vuejs.org/zh/guide/

 

二、Vue CLI使用前 - Node

---

 安装NodeJS

可以直接在官方网站中下载安装

官网：http://nodejs.cn/download/

检测安装的版本

默认情况下自动安装Node和NPM

Node环境要求8.9以上或者更高版本

 cnpm安装

由于国内直接使用npm的官方镜像非常慢，推荐使用淘宝npm镜像

你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的　

npm: npm install -g cnpm --registry=https://registry.npm.taobao.org

这样就可以使用 cnpm 命令来安装模块了：

cnpm install [name]

 什么是npm？

NPM的全称是Node Package Manager

是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准

后续我们会经常使用NPM来安装一些开发过程中依赖包

 

三、Vue CLI使用前 - Webpack(打包工具)

---

 Vue.js官方脚手架工具就使用了webpack模板

对所有的资源会压缩等优化操作

它在开发过程中提供了一套完整的功能，能够使得我们开发过程中变得高效。

官网：https://webpack.docschina.org/

Webpack的全局安装

npm install webpack -g

 

 四、Vue CLI使用(我的开发环境 vscode)

---

 安装vue脚手架(全局安装)

npm install -g @vue/cli

版本号：@vue/cli 5.0.1

 

初始化项目

vue create my-project(项目名称)

Vue 3.x默认配置

Vue 2.x默认配置

自定义配置

//1.命令 回车
  vue create 项目名
//2.选择自定义配置  Manually select features 
//3.选择你需要的配置
  Babel (必选，转码器，可以将ES6代码转换成ES5代码，从而在现有环境执行)
  TypeScript（项目中使用ts开发的话，就勾选）
  Progressive Web App (PWA) Support  (接口缓存，优化项目，渐进式web应用程序)
  Router (路由)
  Vuex (状态管理模式)
  css Pre-processors (css预处理器，如：less、sass)
  Linter / Formatter (代码格式，一般默认选中。如：ESlint)
  Unit Testing (代码测试)
  E2E Testing（需求界面测试）
//4.根据你选的配置进行Y/N选择
//5.选择完之后，就可以运行项目
//6.上下选择，空格选中和取消选中  
npm run serve

Vuejs版本

 Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由（通过调用浏览器提供的接口）。

• 我这里建议选n。这样打包出来丢到服务器上可以直接使用了，后期要用的话，也可以自己再开起来。
• 选yes的话需要服务器那边再进行设置。
• 选项意思是：是否使用history模式实现路由

我选择的是Sass/Scss(with dart-sass) 

node-sass是自动编译实时的，dart-sass需要保存后才会生效。sass 官方目前主力推dart-sass 最新的特性都会在这个上面先实现。（该回答参考http://www.imooc.com/qadetail/318730）

 

 Babel,ESLint,etc.配置
 In dedicated config files // 独立文件放置
 In package.json // 放package.json里

 

是否保存刚才的设置 选择保存需要给个名称

保存之后在下次创建项目时可以直接选择创建现在设置好的配置

等待创建成功

npm run serve(运行项目)

运行效果

 

 

 

五、Vue CLI目录结构

---

 主要目录结构

• 入口页面：程序显示的第一个页面
• 页面目录：用于存放"功能页面"
• 路由目录：用于给"功能页面"配置访问路径

 其他目录结构

 

 

 六、常见问题

---

创建vue项目，提示禁止脚本

• 管理员身份打开PowerShell
• 运行命令 set-ExecutionPolicy RemoteSigned
• 输入Y回车
• 然后再去创建

 

如有不对，请多多指教！