使用vue-cli3创建vue3项目

创建项目

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项目