- 安装vue/cli
npm install -g @vue/cli
# or
yarn global add @vue/cli
- 查看版本 (是否安装成功)
vue -V(大写的V)
- 创建一个项目
vue create project-name
- Default(默认) / Manually(手动)
默认一件生成
手动根据自己的所需去配置
? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint)
Default (Vue 3 Preview) ([Vue 3] babel, eslint)
Manually select features
- Manually(手动) 回车之后
空格是选中
? Please pick a preset: Manually select features
? Check the features needed for your project:
(*) Choose Vue version
(*) Babel
(*) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
(*) Vuex
(*) CSS Pre-processors
(*) Linter / Formatter
>( ) Unit Testing
( ) E2E Testing
- 版本(我选的3.x)
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x
3.x (Preview)
-
Use class-style component syntax? (y/N) //Y
Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) //Y
Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) //Y
- 选择css预处理，这里我选择scss
node-sass是自动编译实时的，dart-sass需要保存后才会生效。
如果您在Dart-VM内运行Dart-Sass,它的运行速度很快,但它表示可以编译为纯JS,dart-sass只是一个编译版本,比node-sass和native dart-sass慢。
个人使用感受：在大型项目中 使用dart-sass比 node-sass（js本机C库的包装）要慢于很多。
> Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
Stylus
- 选择ESLint + Prettier
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
TSLint (deprecated)
- 选择语法检查方式，这里我选择保存就检测
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save // 保存就检测
( ) Lint and fix on commit //// fix和commit时候检查
- 把babel,postcss,eslint这些配置文件放哪,我选择放在独立文件夹
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files // 独立文件放置
In package.json // 放package.json里
- 是否记录一下以便下次继续使用这套配置
Save this as a preset for future projects? (y/N)
- 确定后，等待下载依赖模块
- 启动项目
cd vue-pro3.0-demo // 进入项目根目录
yarn serve // 启动项目
网友评论