Vue2+vite

1.安装yarn         npm install -g yarn

2.查看版本         yarn --version

3.创建项目         create-vite-app   vue3-vite(项目名称)

4.进入项目         cd vue3-vite

5.导入依赖         npm  install

6.安装typescript    yarn add typescript  -D

7.初始化tsc        npx tsc --init

8.将main.js改为main.ts    

9. 修改App.vue 和HelloWorld.vue  里的<>script>加上lang=’ts’ 变成 <script lang="ts">

10.App.vue和HelloWorld.vue虽然报错,但仍可正常运行

11.试运行           npm  run dev

12.在更目录下新建 shim.d.ts文件,如下图(也可用命令创建  New-Item  shim.d.ts即可  )

13.将下面代码粘贴到shim.d.ts 文件中,就不报错了,试运行,看下效果.

declare module "*vue" {

  import { Component } from "vue";

  const component: Component;

  export default component;

}

14.安装vue-router路由   yarn add  vue-router@5.0    选择最新的(没有选择项就把版本号改大  例如 @6.0  @7.0)

15.在src里新建router文件夹

16.在router文件夹里新建index.ts, 将下面代码粘贴到router文件夹里的index.ts里

import { createRouter, createWebHashHistory } from "vue-router";

//在  Vue-router新版本中,需要使用createRouter来创建路由

export default createRouter({

  //指定路由的模式,此处使用的是hash模式

  history: createWebHashHistory(),

  //路由地址

  routes: [],

});

17.安装vuex    yarn add vuex@5.0 选择最新的(没有选择项就把版本号改大  例如 @6.0  @7.0)

18.在src下新建store文件夹,并在里面创建index.ts,将下面代码粘贴进srore里index.ts里

import { createStore } from "vuex";

interface State {

  userName: string;

}

export default createStore({

  state: {

    userName: "yl",

  },

});

19.修改main.ts,用下面内容替换到main.ts里的内容

import { createApp } from "vue";

import  App  from "./App.vue";

import  "./index.css";

import  router  from "./router/index";  //新增

import  vuex  from "./store/index";  //新增

const app = createApp(App);

app.use(router);  //新增

app.use(vuex); //新增

app.mount("#app");

补充typescript

在项目根目录新建vite.config.ts   (New-Item vite.config.ts)

import type { UserConfig } from "vite";

const viteConfig: UserConfig = {

  /**端口号 可改 */

  port: 3556,

  /**hostname */

  hostname: "localhost",

  /**运行自动打开浏览器 */

  open: false,

};

export default viteConfig;

20. 安装sass      yarn add sass sass-loader -D

21.删除多余文件  HelloWorld.vue

22.将App.vue里面和HelloWorld有关的代码都删除,剩余如下

<template>

  <div id=”app”><div id=”main”></div></div>

</template>

<script lang="ts">

export default {

  name: "App",

};

</script>

<style lang="scss" scoped >

</style>