创建项目
vue create 项目名称
default：默认配置,,如果选择默认一直回车即可，第一第二个就是vue2和vue3的区别
manually：手动配置,选择手动需要进行相应的配置
image.png
根据自己项目需求选择相应的选项,上下键和空格选择，最后回车确认
babel---转码
typescript
Progressive Web App (PWA) Support---（PWA）
router
vuex
CSS Pre-processors---css预处理
Linter / Formatter---代码风格检查和格式化
Unit Testing---单元测试
E2E Testing---e2e测试
image.png
选择一个vue版本
image.png
使用css预处理器风格的组件语法？
image.png
使用Babel与TypeScript一起用于自动检测？
image.png
路由使用历史模式? 这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面
image.png
选择哪种css预处理器
image.png
ESLint with error prevention only 只检测错误
ESLint + Airbnb config 独角兽公司的Airbnb，有人说这是一份最合理的JavaScript 的编码规范，他几乎涵盖了js的各个方面
ESLint + Standard config standardjs 是一份强大的js编程规范，自带linter和自动代码纠正，没有配置，自动格式化代码，可在编码早期发现规范问题和低级错误
ESLint + Prettier Prettier作为代码格式话工具，能够统一整体团队的代码风格
TSLint (deprecated)
image.png
Lint on save 保存就检测
Lint and fix on commit 用户commit时检测
image.png
In dedicate config files 在专用配置文件中，单独管理
In package.json 放在package.json 文件中
image.png
?是否将以上这些保存为未来项目的配置？
image.png
cd 项目名称
// 启动项目
npm run serve
提示：
- node-modules应使用
npm i安装,使用cnpm i安装报错
例如：Cannot find module ‘vue-loader-v16/package.json‘，然后我当时找到的解决方法是https://www.pianshen.com/article/24612041541/
然后又报错 Cannot find module ‘fork-ts-checker-webpack-plugin-v5‘，然后尝试了两个方法没成功
最后使用npm i安装就运行起来了
附上配置全局css
Vue3+Antd 修改antd主题，配置全局css
参考资料,还有一个找不到了，在此感谢
使用vue-cli3搭建Vue+TypeScript项目
网友评论