VUE3+TS+Vue-cli创建项目（脚手架搭建）

1、安装vue-cli：npm install -g @vue/cli

• vue-cli 脚手架升级：npm install @vue/cli@next -g
• 查看版本号(必须是3.x版本以上)：vue -V
  

2、新建一个项目名称为vue_work的项目：vue create vue_work

3、启动项目：npm run serve

Vue3 域名访问配置：
① 在vue.config.js中添加配置：

module.exports = {
   devServer: {
       disableHostCheck: true,
   }
}

② 在本地的host文件（C:\Windows\System32\drivers\etc）中添加域名和ip的对应关系。

报错：options has an unknown property ‘disableHostCheck’.
原因：webpack5中将 disableHostCheck 弃用了。
解决办法：将配置替换为：

module.exports = {
   devServer: {
       historyApiFallback: true,
       allowedHosts: "all",
   }
}

4、复制代码出现 Delete␍eslint 解决办法：

• 方法①： npm run lint --fix
• 方法②：在eslintrc.js中添加代码："prettier/prettier": ["error", { endOfLine: "auto" }]
  

5、解决命名报错：Component name “index” should always be multi-word vue/multi-word-component-names

在eslintrc.js中添加代码：" "vue/multi-word-component-names": "off"

6、引入UI框架–Vant：

• 根据官网进行配置：Vue 3 版本的vant安装链接
• 按需引入的时候，发现样式不生效，记得引入样式：import "vant/lib/index.css"
• 引用插件报错：SyntaxError: Unexpected token ‘?’
  
  **解决办法：升级node的版本，原本是 12.22.6 升级到 14.17.0 **