Vue/Cli 创建项目

安装

安装 vue-cli 最新版本

cnpm install -g @vue/cli
// mac环境下全局安装需要在命令前加sudo
sudo cnpm install -g @vue/cli

检查 vue-cli 版本

vue -V

创建项目

• 切换到自己创建的空白文件夹内，使用以下命令

vue create 项目名称 // 项目名称不可包含大写字母与中文

• 选择创建方式
  • 默认创建（Default ([Vue 2] babel, eslint) ）
  • 默认创建（Default (Vue 3 Preview) ([Vue 3] babel, eslint) ）
  • 手动（Manually）
  • 自己保存的历史配置
• 配置（空格键是选中与取消，A键是全选，蓝色为推荐选项）
  • Choose Vue version：选择Vue版本
  • Babel：支持Babel（Vue项目中普遍使用Es6语法，但有时我们的项目需要兼容低版本浏览器，这时就需要引入Babel插件，将Es6转成es5）
  • Router：支持 Vue-router
  • Vuex：支持 Vuex
  • CSS Pre-Processors：支持 CSS 预处理器
  • Linter / Formatter：支持代码风格检查和格式化
  • TypeScript：支持使用 TypeScript 书写源码
  • Progressive Web App (PWA) Support：PWA 支持
  • Unit Testing：支持单元测试
  • E2E Testing：端到端（end-to-end）（支持 E2E 测试）
• 保存配置 Yes or No
• 选择Vue版本 Choose Vue version
  • 2.x（生产版本建议选择2.x）
  • 3.x (Preview)
• **选择路由模式 Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) **
  • history（Y）：ie浏览器只支持 10+
  • hash（N）
• CSS 预处理方式
  • **Sass/SCSS (with dart-sass) **
  • Sass/SCSS (with node-sass)
  • Less
  • Stylus 
• 自动化代码格式化检测（蓝色为推荐选项）
  • ESLint with error prevention only
  • ESLint + Airbnb config
  • ESLint + Standard config
  • ESLint + Prettier
• 语法检查方式（个人建议关闭ES-LINT）
  • Lint on save（保存时）
  • Lint and fix on commit (requires Git)（fix 和 commit 时）
• 配置文件存放位置（Babel，ESLint等）
  • In dedicated config files （在专用配置文件中 ）
  • In package.json
• 是否保存为预设 Yes or No
  • YES （Save preset as保存位置：取个名字 **）
  • NO