安装脚手架
安装命令行
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 <space> to select, <a> to toggle all, <i> to invert selection, and <enter> 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 预处理器