一、Vue-CLI 脚手架
全局安装的npm包
vue create命令可以快速搭建一个新项目，vue server构建
vue ui 图形化界面管理项目
二、Vue-cli 服务
CLI服务(@vue/cli-service)是一个开发环境依赖，一个npm包
本地安装在@vue/cli创建的每个项目中
三、CLI插件
四、Vue CLI安装
vue/cli 需要node.js 8.9或更高版本
** 全局安装(最新版本)
npm install -g @vue/cli
如果安装失败，使用 npm cache clean 命令清除缓存
** 安装指定版本
npm install -g @vue/cli@5.0.6
** 查看版本号
vue --version 或者 vue -V
五、创建项目的两种方式
1、vue create命令创建
2、vue ui 图形化界面创建
** 使用vue create命令
vue create myapp(创建一个myapp项目)
Vue CLI v5.0.8 ? Please pick a preset: (Use arrow keys) > Default ([Vue 3] babel, eslint) Default ([Vue 2] babel, eslint) Manually select features
preset 预设3个选项：
第三个：Manually select features 需要手动对项目进行配置
Vue CLI v5.0.8 ? Please pick a preset: Manually select features ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed) >(*) Babel ( ) TypeScript ( ) Progressive Web App (PWA) Support ( ) Router ( ) Vuex ( ) CSS Pre-processors (*) Linter / Formatter ( ) Unit Testing ( ) E2E Testing
Babel 转码器 用于将ES6代码转为ES5
TypeScript
Progressive Web App... 支持渐进式web应用程序
Router 路由管理
Vuex 状态管理
CSS Pre-processors CSS预处理器
Linter / Formatter 代码风格检查和格式校验
Unit Testing 单元测试
E2E Testing 端到端测试
这里保持默认，按enter键选择版本
Vue CLI v5.0.8 ? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, Linter ? Choose a version of Vue.js that you want to start the project with (Use arrow keys) > 3.x 2.x
Vue CLI v5.0.8 ? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, Linter ? Choose a version of Vue.js that you want to start the project with 3.x ? Pick a linter / formatter config: (Use arrow keys) > ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ESLint + Prettier
ESLint with error prevention only 指ESLint仅用于错误预防
后3个表示是选择ESLint和哪一种代码规范一起使用
? Pick a linter / formatter config: Basic ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed) >(*) Lint on save ( ) Lint and fix on commit
提示选择代码检测方式，这里选择默认选项“Lint on save”（保存时检测）
? Pick a linter / formatter config: Basic ? Pick additional lint features: Lint on save ? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) > In dedicated config files In package.json
提示选择配置信息的存放位置。第一个选项是指在专门的配置文件中存放配置信息，第二个选项是将配置信息存储在package.json文件中
? Pick a linter / formatter config: Basic ? Pick additional lint features: Lint on save ? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files ? Save this as a preset for future projects? (y/N)
提示为当前配置定义一个名字
? Pick a linter / formatter config: Basic ? Pick additional lint features: Lint on save ? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files ? Save this as a preset for future projects? Yes ? Save preset as: myapp
输入名字后按Enter键开始创建项目
根据提示在命令提示符窗口中输入命令cd myapp切换到项目目录
终止项目使用ctrl+c
项目创建完成后，进入项目根目录，使用 npm run serve 运行项目
六、单文件组件
1、扩展名为.vue的文件就是一个单独的组件，文件中封装了组件相关的代码，如HTML、CSS和JavaScript，最终通过Webpack编译成JS文件并在浏览器中运行
2、扩展名为.vue 文件由三部分组成，<template> <style> <script>
