Vue2 环境配置及安装

安装脚手架

安装命令行

yarn global add @vue/cli  
    或  
npm i -g @vue/cli
    或
cnpm i -g @vue/cli
    或
pnpm i -g @vue/cli

测试脚手架版本

vue --version

---

创建项目

1. 创建

vue create .         // 在当前目录创建项目

vue create vue2_task (项目名)    // 在当前目录创建指定名称的项目

2. 预设版本号 （箭头选择）

Default ([Vue 3] babel, eslint)    // 默认配置1 vue2
Default ([Vue 2] babel, eslint)    // 默认配置2 vue3
Manually select features           // 手动选择功能 【推荐】

3. 选择需要功能 （空格选中）

(*) Babel                 // 编译es6+
 ( ) TypeScript            // ts
 ( ) Progressive Web App (PWA) Support    // 先进的web app支持
 (*) Router                // 路由
 ( ) Vuex                  // Vuex
 (*) CSS Pre-processors    // css 预处理器，可以使用less等
 (*) Linter / Formatter    // 代码格式校验
 ( ) Unit Testing          // 单元测试
 ( ) E2E Testing           // 单元测试和端到端测试

4. 选择项目需要的 vue.js 的版本

? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
  3.x    // 3版本
> 2.x    // 2版本

5. 路由模式选择

// 是否选择 history 模式
? Use history mode for router?  (Y/n)    // 选择 no [按需选择]

6. Css 预处理器选择

Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass)    // Sass/Scss 预处理器
  Less                          // Less 预处理器
  Stylus                        // Stylus 预处理器

7. 选择 ESLint 代码配置

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only    // 选择默认[推荐]
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

8. 进行代码检测

? Pick additional lint features: (Press  to select,  to toggle all,  to invert selection, and  to
proceed)
>(*) Lint on save        // 保存就检查 [推荐]
 ( ) Lint and fix on commit (requires Git)    // fix 和 commit 的时候检查

9. 选择 babel 等配置存放位置

? Where do you prefer placing config for Babel, ESLint, etc.? 
(Use arrow keys)    
> In dedicated config files    // 放再单独的文件中  [推荐]
  In package.json              // 放在 package.json 文件中

10. 刚才选择的这套方案是否需要保留

? Save this as a preset for future projects? (y/N)    
// 默认选择 no [推荐]

11. 完成后执行代码（手动输入）

$ cd vue2_task    // 进入项目目录
 $ yarn serve      // 启动项目

12. 手动复制网址进入可视化页面

http://localhost:8080/

---

补充

        创建页面结构快捷键：

vl         // 创建页面 + less 预处理器

vb         // 创建页面 + scss 预处理器

vs         // 创建页面 + sass 预处理器