Vue3项目创建

一、创建项目

1）（荐）使用了官方推荐的构建工具Vite来构建项目

#使用vite创建JoneWithVue3的项目
npm init vite@latest JoneWithVue3 --template vue 

# npm 7+ ，要多加--
npm init vite@latest JoneWithVue3 -- --template vue

创建好了就直接运行

cd JoneWithVue3 #转到刚刚新建的项目下
npm install #安装基本配置
npm run dev #开发环境运行

2）使用vue/cli构建项目

npm i -g @vue/cli #全局安装cli构建工具
vue create JoneWithVue3 #创建项目,
#create是vue3专有的，如果你的cli版本不够高，会提示你升级
#vue2是vue init JoneWithVue2

二、添加ts

之前版本的vite会自动添加依赖typescript、我安装的时候没有默认添加ts，所以自行安装

npm i typescript

修改main.js为main.ts，并修改根目录的index.html中对main.js的引用为main.ts

在项目根目录下新建两个文件vue.config.js和tsconfig.json

//vue-config.js
module.exports = {
  pages: {
      index: {
          entry: 'src/main.ts'
      }
  }
};

//tsconfig.json
// 指定了用来编译这个项目的根文件和编译选项
// 配置参考https://www.tslang.cn/docs/handbook/tsconfig-json.html
{
  "compilerOptions": {
      "target": "esnext",
      "module": "esnext",
      "strict": true, //这样可以对`this`上的数据属性进行严格的推断，否则总是被视为any类型
      "jsx": "preserve",
      "moduleResolution": "node",
      // 以上摘自官方代码
      "importHelpers": true,
      "isolatedModules": true,
      "noEmit": true
  },
  "include": [
      "src/**/*", "src/main-vue.d.ts" //**/递归匹配任意子目录
  ],
  "exclude": [ //不包括的目录
      "node_modules"
  ]
}

ts中引入vue文件会报错，上面操作做完后你的main.ts中会报错App的引入

在src目录下新建文件main-vue.d.ts，内容如下

// 在没用用到需要具体定义的内容的时候，可以只声明一下'*.vue'就可以
declare module '*.vue' {
  
  import {ComponentOptions} from 'vue';
  const componentOptions: ComponentOptions;
  export default componentOptions;

}

vscode中写vue3项目的时候，编辑器插件记得禁用Vetur。然后改用Volar。否则乱七八糟的错在停的报