vue3.0+Ts學習隨筆（一）

1、創建vue3.0項目（npm）

npm init @vitejs/app

（1）輸入項目名稱

 

 

 （2）選擇模板 （vue+Ts）

 

 

 （3）創建成功

 

 

 2、安裝依賴、啟動項目

npm install     //安裝依賴
npm run dev  //啟動項目

3、配置文件

1、配置vite

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 如果編輯器提示 path 模塊找不到，則可以安裝一下 @types/node -> npm i @types/node -D
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src') // 設置 `@` 指向 `src` 目錄
    }
  },
  base: './', // 設置打包路徑
  server: {
    port: 4000, // 設置服務啟動端口號
    open: true, // 設置服務啟動時是否自動打開瀏覽器
    cors: true // 允許跨域

    // 設置代理，根據我們項目實際情況配置
    // proxy: {
    //   '/api': {
    //     target: 'http://xxx.xxx.xxx.xxx:8000',
    //     changeOrigin: true,
    //     secure: false,
    //     rewrite: (path) => path.replace('/api/', '/')
    //   }
    // }
  }
})

2、配置vue-router

（1）安裝路由工具 vue-router@4

npm i vue-router@4

（2）配置router/index.ts文件

在 src 下創建 “router/index.ts”文件

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

const routes = [
  {
    path: "/",
    name: "Home",
    component: () => import('../views/Home.vue') // 懶加載組件
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;

創建完成之后在 “main.ts”中掛載

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import "./assets/css/overall.css"
createApp(App).use(router).mount('#app')

ps：由於使用的是ts開發，所以如果在創建“router/index.ts”文件時用的是 “.js”會出現以下錯誤

 

 

 

 

to be continued........