浏览器

重点：**不反对IE浏览器
Firefox、Chrome 51+（没有实测，依据proxy兼容性揣测出的）

装置

查看vue版本低于3.0先卸载后装置，没装置过就间接装置（node.js 8.0+)

vue -V/vue --versionnpm install -g @vue/cli

（如果低于3.0要先卸载 npm uninstall vue-cli -g）

创立我的项目

1、命令创立
vue-cli 3.0+创立我的项目

vue create my-project(项目名称）

vue-cli 2.0 场景我的项目

vue init webpack my-project

2、ui创立

vue ui

抉择我的项目依赖

1、抉择我的项目预设

vue my-projectVue CLI v4.5.15? Please pick a preset: (Use arrow keys)> Default ([Vue 2] babel, eslint)      --vue2我的项目 默认预设  Default (Vue 3) ([Vue 3] babel, eslint) --vue3我的项目 默认预设  Manually select features   --手动抉择

默认预设里（default）:蕴含babel, eslint

2、设置我的项目所需的性能
搭建全家桶+typescript须要抉择=》Manually select features

? Please pick a preset: Manually select features? Check the features needed for your project: (*) Choose Vue version --抉择vue版本 (*) Babel    --设置babel代码编译（必选） (*) TypeScript --ts ( ) Progressive Web App (PWA) Support  --渐进式的web零碎 浏览器app (*) Router   --vue路由 (*) Vuex   --vue状态治理库 (*) CSS Pre-processors --CSS预处理器 (*) Linter / Formatter --代码查看 ( ) Unit Testing --单元测试>(*) E2E Testing --端对端测试/自动化测试

3、抉择预设性能
a、vue版本

b、是否应用class组件语法，是TypeScript我的项目所以须要用

Use class-style component syntax

设置的vue-class-component vue-property-decorator vuex-class 解析
参考文章：

https://blog.csdn.net/weixin_44041976/article/details/107732228
https://zhuanlan.zhihu.com/p/48371638

c、应用Babel与TypeScript一起用于自动检测的填充?这里肯定要抉择y

Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes

d、路由history模式

? Use history mode for router? (Requires proper server setup for index fallback in production) Yes

HTML5 History 模式阐明:

https://router.vuejs.org/zh/guide/essentials/history-mode.html
应用history模式刷新页面时会呈现404 谬误解决办法：服务器端须要配置

前端路由配置：


e、抉择css预处理

 Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):> Sass/SCSS (with dart-sass) --举荐dart 装置 性能更好  Sass/SCSS (with node-sass) --国内装置比拟艰难 容易保留 应用的sass版版本 对node版本也有限度  Less  Stylus

f、抉择代码检测模式

? Pick a linter / formatter config: (Use arrow keys)> ESLint with error prevention only   ESLint + Airbnb config  ESLint + Standard config  ESLint + Prettier  TSLint (deprecated)ESLint with error prevention only ：只配置应用 ESLint 官网的举荐规定        ESLint + Airbnb config：应用 ESLint 官网举荐的规定 + Airbnb 第三方的配置ESLint + Standard config：应用 ESLint 官网举荐的规定 + Standard 第三方的配置ESLint + Prettier：应用 ESLint 官网举荐的规定 + Prettier 第三方的配置TSLint：TypeScript代码查看

ESLint 官网举荐的规定链接
Airbnb链接
Standard链接
Prettier链接
TSLint链接

参考以下文章（给作者点个赞）：

https://blog.csdn.net/weixin_42069147/article/details/114262216
https://www.jianshu.com/p/1082eab5e593

g、抉择检测时间

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)>(*) Lint on save --保留时检测 ( ) Lint and fix on commit --提交时检测 git commit 检测

h、抉择自动化测试

? Pick an E2E testing solution:> Cypress (Chrome only)  Nightwatch (WebDriver-based)  WebdriverIO (WebDriver/DevTools based)

i、Babel,PostCSS, ESLint是否独自生成各项配置文件

? Where do you prefer placing config for Babel, ESLint, etc.?> In dedicated config files  In package.json

是否保留以后抉择的配置项

 Save this as a preset for future projects? No

我的项目目录

运行我的项目：npm run serve