一、初始化項目
npm create vite-app <project name>
二、進入項目目錄
cd ……
三、安裝依賴
npm install
四、啟動項目
npm run dev
五、配置項目
- 安裝 typescript
npm add typescript -D
- 初始化 tsconfig.json
//執行命令 初始化 tsconfig.json
npx tsc --init
- 將main.js修改為main.ts
其他的引用也修改為main.ts,也需要將其他頁面的<script> 修改為 <script lang="ts"> - 配置 ts 識別vue文件,在項目根目錄添加shim.d.ts文件
添加以下內容
declare module "*.vue" {import { Component } from "vue";const component: Component;export default component;
}
六、配置路由Vue Router
- 安裝vue-router
npm add vue-router@next
- 安裝完后配置vue-router
在項目src目錄下面新建router目錄，然后添加index.ts文件，添加以下內容
// import VueRouter from 'vue-router'
import {createRouter, createWebHashHistory} from 'vue-router'
const routes:any = []
// Vue-router新版本中，需要使用createRouter來創建路由
export default createRouter({// 指定路由的模式,此處使用的是hash模式history: createWebHashHistory(),routes // short for `routes: routes`
})// const routes :any = []
// // 3. Create the router instance and pass the `routes` option
// // You can pass in additional options here, but let's
// // keep it simple for now.
// const router = VueRouter.createRouter({
// // 4. Provide the history implementation to use. We are using the hash history for simplicity here.
// history: VueRouter.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 app = createApp(App)
// 確保 t_use_ 實例來創建router, 將路由插件安裝到 app 中
app.use(router)
app.mount('#app')
// createApp(App).mount('#app')
七、配置Vuex
- 安裝vuex（需帶版本號安裝）
npm add vuex@next
- 安裝完后配置vuex
在項目src目錄下面新建store目錄，并添加index.ts文件，添加以下內容
import { createStore } from 'vuex'interface State {userName: string
}
export default createStore({state(): State {return {userName: "vuex",};},
});
- 將vuex引入到main.ts中,修改main.ts文件
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './router/index'
import store from './store/index'// import router 后創建并掛載根實例。
const app = createApp(App)
// 確保 t_use_ 實例來創建router, 將路由插件安裝到 app 中
app.use(router)
app.use(store)
app.mount('#app')
// createApp(App).mount('#app')
注：其余前端UI插件（Element Plus 或 Ant Design Vue）自行安裝，然后main.ts引入即可。
