配置VUE项目

2021/7/24 8:04:52

本文主要是介绍配置VUE项目,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

vue create project-name
备注:项目名称不可以有大写字母
please pick a preset ?

default(vue2 babel,eslint) //默认配置 vue2版本,基本配置包含 babel
default(vue3 babel,eslint) //默认配置 vue3版本,基本配置包含 babel
manually select features //手动配置(我选择的这一项)

备注:Babel 是javaScript 编译器,是一个工具链,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法。旧版本的babel配置文件叫 babel.config.js,新版本的配置文件叫 babel.config.json

? Check the features needed for your project:
(Press to select, to toggle all, to invert selection)

? Check the features needed for your project: 
(Press <space> to select, <a> to toggle all, <i> to invert selection)
//space选中,a全选,i反选
◉ Babel  
//转码器,可将ES6转为ES5
◉ TypeScript 
//TypeScript是一个JavaScript的超集,包含并扩展了 JavaScript 的语法,需要被编译输出为 JavaScript在浏览器运行
◯ Progressive Web App (PWA) Support
// 渐进式Web应用程序 https://juejin.cn/post/6844903556470816781
◉ Router 
◉ Vuex 
◉ CSS Pre-processors 
//CSS预处理器如less,sass
◉ Linter / Formatter 
// 代码风格检查和格式化(如:ESlint)
◯ Unit Testing 
//单元测试
◯ E2E Testing 
//end to end测试

备注:

① https://juejin.cn/post/6844903556470816781

② E2E测试,即end to end测试,黑盒子测试的一种。vue上推荐两种框架,分别是nightwatch 和 cypress 。但是nightwatch 需要安装配置 selenium,selenium-server需要安装jdk,但 API丰富度更高。cypress 安装方便,测试写法和单元测试一致,只支持 Chrome 类浏览器,有自己的可视化窗体,能记录运行信息,重现 bug 。有支持其他浏览器的计划。TY系统用的是cypress。详细见:https://blog.csdn.net/qq_39300332/article/details/81197503

Use history mode for router?

有两种router模式,hash模式和history模式,选择hash模式。参考链接:
https://blog.csdn.net/cplvfx/article/details/107294535
https://www.jianshu.com/p/ae8f9c41a77c

Pick a CSS pre-processor

因为这次要配置sass相关的,所以我们在sass相关的选项选择,分别是ass/SCSS (with dart-sass) Sass/SCSS (with node-sass)。选择dart-sass。node-sass(底层是lib-sass),dart-sass。node-sass速度快、迭代慢。dart-sass大型项目速度较lib-sass慢1.5倍,但是更易于维护更新,官方主推。详细参考:https://blog.csdn.net/qianxing111/article/details/107617538

Pick a linter / formatter config?

选择 ESLint + Prettier 。Prettier 是一个格式化工具。之前看文章说有出现
eslint与prettier在函数前后的空格格式化冲突的,这时候可以修改prettier配置,配置为 函数千年后的空格不格式化就不会冲突了

关于vue3版本的一些补充
1、Use class-style component syntax? (Y/n) y

是否使用Class风格装饰器?
即原本是:home = new Vue()创建vue实例
使用装饰器后:class home extends Vue{}

2、 Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) y

使用Babel与TypeScript一起用于自动检测的填充? yes

3、 Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?

In dedicated config files 在专用的配置文件中
In package.json 在package.json

————————————————
版权声明:本文为CSDN博主「fina_」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/fxinn/article/details/118966922



这篇关于配置VUE项目的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程