- 安装Node.js
brew install node #安装node，下载安装请忽略此处
node -v #版本查看
npm -v #版本查看
- 安装Vue
npm install -g @vue/cli #终端执行安装 Vue-CLI'
vue -V #查看版本
- 创建项目
vue create <Project Name> #创建项目文件名不支持驼峰（含大写字母）
'配置选项'
default (babel, eslint) #默认套餐，提供 [babel]和 [eslint]
Manually select features #手动配置,可选功能的 npm 包
'手动配置选择功能'
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) TypeScript #支持使用 TypeScript
( ) Progressive Web App (PWA) Support #渐进式网页应用
(*) Router #支持 [vue-router]
(*) Vuex #支持 [vuex]
(*) CSS Pre-processors #CSS 预处理器
(*) Linter / Formatter #支持代码风格检查和格式化
(*) Unit Testing #支持单元测试
( ) E2E Testing #支持 E2E 测试
'选择css预处理'
? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
SCSS/SASS
> LESS
Stylus
'选择ESLint + Prettier'
? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
> ESLint + Prettier
'选择语法检查方式'
Vue CLI v3.0.0-beta.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: Prettier
? 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时候检查
'选择单元测试'
Vue CLI v3.0.0-beta.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: (Use arrow keys);
Mocha + Chai
> Jest
'babel,postcss,eslint配置文件位置'
Vue CLI v3.0.0-beta.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys);
> In dedicated config files #独立文件
In package.json #package.json
'是否记录配置'
Vue CLI v3.0.0-beta.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (Y/n) #是否记录一下以便下次继续使用这套配置
'确认后等待下载依赖'
..................................
- 下载成功后
'进入创建项目'
cd <Project Name>
'启动项目'
npm run serve
'项目打包 - 执行后项目内会生成dist文件夹为上线文件'
npm run build
