Vue3-vite项目搭建(npm)

1.npm init
2.npm install create-vite-app --save-dev
3.安装typscript:npm install -g typescript
4.npx tsc --init：初始化tsconfig.json
5.将main.js改为main.ts，包括index.html里的引用
6.将vue页面中加入lang=“ts”

7.因为typescript无法识别vue文件,创建文件shim.d.ts并加入

declare module "*.vue" {
  import { Component } from "vue";

  const component: Component;

  export default component;
}

8.安装路由：npm install vue-router
9.创建router/index.ts

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

export default createRouter({
    history: createWebHashHistory(),
    routes: []
})

10.安装vuex: npm install vuex

import { createStore } from "vuex";

interface State{
    userName:string
}

export default createStore({
    state: {
        userName:'飞飞'
    }
})

11.安装sass：install node-sass --save-dev
install sass-loader --save-dev
安装失败解决办法：在项目内添加一个 .npmrc 文件

sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/
electron_mirror=https://npm.taobao.org/mirrors/electron/
registry=https://registry.npm.taobao.org