乐趣区

关于vue.js:vue30全家桶typescript项目一

jiezi

浏览器

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

装置

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

vue -V/vue --version
npm 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-project
Vue 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

退出移动版