安装脚手架
npm install -g @vue/cli
或者
yarn global add @vue/cli
安装完成后可通过
vue -V
查看版本
通过模板创建项目
vue create my-app
- 选择模板类型
? Please pick a preset: (Use arrow keys)
vue2.0 ([Vue 2] babel, router, vuex, eslint)
Default ([Vue 2] babel, eslint)
Default (Vue 3) ([Vue 3] babel, eslint) // 默认配置
❯ Manually select features // 手动配置
这里选择手动,默认配置里没有包含 TS
- 接下来就是选择我们所需的选项来生成项目，使用 空格键 选中
? Check the features needed for your project:
◉ Choose Vue version
◉ Babel // javascript转译器
◉ TypeScript // 使用 TypeScript 书写源码
◯ Progressive Web App (PWA) Support // 渐进式WEB应用
◉ Router // 使用vue-router
◉ Vuex // 使用vuex
❯◉ CSS Pre-processors // 使用css预处理器
◉ Linter / Formatter // 代码规范标准
◯ Unit Testing // 单元测试
◯ E2E Testing // e2e测试
- 是否使用 Class 风格装饰器？
// 是否使用Class风格装饰器？
? Use class-style component syntax?[y/N] No
// 使用Babel与TypeScript一起用于自动检测的填充
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfi
lls, transpiling JSX)? Yes
// 是否使用history模式的路由
? Use history mode for router? (Requires proper server setup for index fallback
in production) Yes
// 使用的CSS预处理方式，我个人选择了Less
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported
by default): (Use arrow keys)
Sass/SCSS (with dart-sass) // 保存后编译
Sass/SCSS (with node-sass) // 实时编译
❯ Less
Stylus
// 选择一个代码格式化工具,这里建议使用严格模式
? Pick a linter / formatter config: (Use arrow keys)
ESLint with error prevention only // 只进行报错提醒
ESLint + Airbnb config // 不严谨模式
ESLint + Standard config // 正常模式
❯ ESLint + Prettier // 严格模式
TSLint (deprecated) // typescript格式验证工具
// 代码检查方式
❯◉ Lint on save // 保存时自动检查
◯ Lint and fix on commit // commit的时候检查
// 配置文件的保存方式
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files // 独立的配置文件
In package.json // 在pagekage.json中配置
// 是否保存上述配置，保存后下一次可直接根据上述配置生成项目
? Save this as a preset for future projects? (y/N)
上述保存以后，开始拉取模板文件 可能会报以下错误
Error: Cannot find module 'vue-template-compiler'
这时候项目已经创建了，直接 cd 到项目目录，然后安装依赖即可
yarn add -D vue-template-compiler
如何删除上面保存的配置
sudo vim ~/.vuerc
删除完对应的模板以后保存即可
