vue3的vite脚手架+TS

安装vue3最新版本的vue-cli

卸掉旧版

npm uninstall vue-cli -g  
// or
yarn global remove vue-cli

安装新版本 @vue/cli

npm install -g @vue/cli  
或
yarn global add @vue/cli
//检查vue版本号
vue -V

搭建vue3最新脚手架

有两种，分别是原先那种和vite脚手架
原先

vue create 项目名称
// 与旧版本步骤一致 可在安装时，选择配置项

vite脚手架

初始化一个项目

npm init vite-app myapp
// or
yarn create vite-app myapp

下载依赖

yarn install 
// or
yarn 
// or
npm i

启动项目

npm run dev
// or
yarn dev

注意：这个项目只是一个基本的结构，是没有其他的配置的，必须自己添加配置

vite配置项目

配置TS

安装

cnpm i typescript -D

初始化

//执行命令 初始化 tsconfig.json 
npx tsc --init     

将main.js修改为main.ts
并将vue文件中的

配置vue-router

安装

yarn add vue-router@4.0.12
// or
yarn add vue-router@next

配置vue-router
在项目src目录下面新建router目录，然后添加index.ts文件，添加以下内容

import {createRouter, createWebHashHistory} from 'vue-router'
const routes:any = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue')
  }
]
// Vue-router新版本中，需要使用createRouter来创建路由
export default  createRouter({
  // 指定路由的模式,此处使用的是hash模式
  history: createWebHashHistory(),
  routes // short for `routes: routes`
})

将router引入到main.ts中,修改main.ts文件

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './router/index'
 
// import router 后创建并挂载根实例。
const 
// 确保 t_use_  实例来创建router, 将路由插件安装到 app 中
createApp(App).use(router).mount('#app')

配置vuex

安装

yarn add vuex@4
//或者
yarn add vuex@next

在项目src目录下面新建store目录，并添加index.ts文件，添加以下内容

import { createStore } from 'vuex'
 
interface State {
  userName: string
}
export default createStore({
  state(): State {
    return {
      userName: "vuex",
    };
  },
  mutations:{ },
  actions: { },
  modules: { },
  plugins: [ ]
 
});