vue3.0+创建项目

骑猪看日落 2023-01-10 05:25 116阅读 0赞

1、`vue create test` //test为项目名  
使用淘宝镜像创建项目，选择是

?  Your connection to the default npm registry seems to be slow.
       Use https://registry.npm.taobao.org for faster installation? Yes

2、提示选择一个preset（预设），有3个选项，这里选择第三个，自主选择一些配置项

? Please pick a preset: (Use arrow keys)
       Default ([Vue 2] babel, eslint)
       Default (Vue 3 Preview) ([Vue 3] babel, eslint)
     > Manually select features

3、根据自己需求，选择相应项：按**空格键**选中，再按一次则取消选中，**a**全选，**i**反选

? Please pick a preset: Manually select features
    ? Check the features needed for your project:
     (*) Choose Vue version//选择vue版本，2.0？3.0？
     (*) Babel//转码器，可以将ES6代码转为ES5代码，从而在现有环境执行
     ( ) TypeScript//TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人再用
     ( ) Progressive Web App (PWA) Support//渐进式Web应用程序
     (*) Router//vue-router（vue路由）
     (*) Vuex//vuex（vue的状态管理模式）
    >(*) CSS Pre-processors//CSS 预处理器（如：less、sass）
     (*) Linter / Formatter//代码风格检查和格式化（如：ESlint）
     ( ) Unit Testing//单元测试（unit tests）
     ( ) E2E Testing//e2e（end to end） 测试

4、选择vue版本，这里选择3.0+  
5、选择路由模式，是否用历史模式，这里选择否（发现ie浏览器history模式只支持10及以上），用hash模式  
Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)  
6、 css预处理器，主要为css解决浏览器兼容、简化CSS代码 等问题，选择Less  
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):  
Sass/SCSS (with dart-sass)  
Sass/SCSS (with node-sass)

> Less  
> Stylus

7、ESLint：提供一个插件化的javascript代码检测工具，ESLint + Prettier //使用较多  
Pick a linter / formatter config:  
ESLint with error prevention only  
ESLint + Airbnb config  
ESLint + Standard config

> ESLint + Prettier

8、什么时候检测

> (\*) Lint on save  
> ( ) Lint and fix on commit (requires Git)

9、如何存放配置  
Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)  
In dedicated config files//专用配置文件

> In package.json//放到package.json中

10、是否将此保存为将来项目的预设？（是/否）  
Save this as a preset for future projects? (y/N)