@vue/cli创建vue项目

yihuaihai
1,944 阅读2分钟

1.先卸载vue-cli

npm uninstall -g vue-cli

2.安装@vue/cli

npm install -g @vue/cli // 安装最新版本
vue -V // 查看vue安装的版本

3.通过@vue/cli创建项目

使用命令创建项目

  1. 执行该命令
vue create my-project // my-project 表示项目名称
  1. 此处有两个选择
  • default (babel, eslint)默认的选项, 包含了基本的 Babel + ESLint
  • Manually select features手动选择(可以使用上下方向键来切换选项, 通过space键选择对应的单个选项, space键就是空格键, 也可以通过a键全部选择, i键取消全部选择)
    • Babel编译
    • TypeScript支持ts语法
    • Progressive Web App (PWA) Support
    • Router安装vue-router路由
    • Vuex安装vuex状态管理
    • CSS Pre-processors安装css预处理器
    • Lineter / Formatter代码风格检查和格式化
    • Unit Testing 支持单元测试
    • E2E Testing支持E2E测试
  • 一般选择Babel、Router、Vuex、CSS Pre-processors、Lineter / Formatter
  1. 按住enter进入下一步，接下来都是对之前每项选项的更详细的选择
  • Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) 是否安装router路由, 选择 y
  • Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):选择css预处理语言, 根据自己喜欢用那个css预处理语言, 选择自己喜欢的就行, 选择 Sass/SCSS
  • Pick a linter / formatter config: Standard选择ESLint的代码规范, 选择 Standard
  • Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save选择何时进行代码检测，此处选择在保存时进行检测, 选择 Lint on save
  • Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files选择 Babel、PostCSS、ESLint等配置文件存放位置，此处选择In dedicated config files将文件单独保存在各自的配置文件中
  • Save this as a preset for future projects? No是否把当前的这一系列选项配置保存起来，方便下一次创建项目时复用。根据自己选择 y 或 n，如果选择了 yes 会弹出Save preset as需要输入保存的名字
Vue CLI v4.0.5
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press to select, to toggle all, to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? Yes
? Save preset as: my-project
  1. 如果选择了Unit Testing
  • Pick a unit testing solution: Jest 选择单元测试解决方案，此处选择 Jest

使用图形化界面创建项目

vue ui
avatar
文章
阅读
粉丝