使用vite開啟vue3的開發之旅

1、npm install create-vite-app -g

2、npm create-vite-app vite

3、cd vite

4、npm install

5、npm run dev

安裝vue-router使用命令行

npm i vue-router@next

安裝vuex使用命令行

npm i vuex@next

安裝sass使用命令行

npm i sass --save-dev

可以在項目根目錄下創建 vite.config.js 配置 Vite（類似vue.config.js）

module.exports = {
  // 導入別名
  // 這些條目可以是精確的請求->請求映射*（精確，無通配符語法）
  // 也可以是請求路徑-> fs目錄映射。 *使用目錄映射時
  // 鍵**必須以斜杠開頭和結尾**
  alias: {
    // ‘react‘: ‘@pika/react‘,
    // ‘react-dom‘: ‘@pika/react-dom‘
    // ‘/@foo/‘: path.resolve(__dirname, ‘some-special-dir‘),
  },
  // 配置Dep優化行為
  optimizeDeps: {
    // exclude: [‘dep-a‘, ‘dep-b‘],
  },
  // 轉換Vue自定義塊的功能。
  vueCustomBlockTransforms: {
    // i18n: src => `export default Comp => { ... }`,
  },
  // 為開發服務器配置自定義代理規則。
  proxy: {
    // proxy: {
    //   ‘/foo‘: ‘http://localhost:4567/foo‘,
    //   ‘/api‘: {
    //     target: ‘http://jsonplaceholder.typicode.com‘,
    //     changeOrigin: true,
    //     rewrite: path => path.replace(/^\/api/, ‘‘),
    //   },
    // },
  },
  // ...
}

vue-router使用：（src/router/index.js）

import {createRouter, createWebHistory} from 'vue-router'
import Home from '../components/home/Home.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // route -> routes
    {
      path: '/',
      name: 'home',
      component: Home,
    },
    {
      path: '/cards',
      name: 'cards',
　　　 component: () => import(/* webpackChunkName: 'Card' */ '../components/cards/Cards.vue'),
　　},
　],
})

 export default router

main.js做相應改變

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import store from './store'
import router from './router'

const app = createApp(App)

app.use(store)
app.use(router)
app.mount('#app')