使用vite搭建vue3.0项目模板

搭建步骤

创建vite-vue项目模板

# https://github.com/vitejs/vite/tree/main/packages/create-app
npm init @vitejs/app m-vvv3 --template vue-ts
# 成功后提示：
npx: 5 安装成功，用时 4.119 秒
Scaffolding project in C:\*\m-vvv3...

Done. Now run:

  cd m-vvv3
  npm install (or `yarn`)
  npm run dev (or `yarn dev`)
# https://vitejs.dev/guide/#scaffolding-your-first-vite-project

安装vant3

# https://vant-contrib.gitee.io/vant/v3/#/zh-CN/quickstart
npm i vant@next -S

vue-router

# https://next.router.vuejs.org/guide/#router-link
npm install vue-router@4 --save 

router/index.ts

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

import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes: Array<any> = [
  {
    path: '/', name: 'Home', component: Home
  },
  {
    path: '/about', name: 'About', component: About
  }
]

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

export default router

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import 'vant/lib/index.css';

createApp(App).use(router).mount('#app')

vuex

# https://next.vuex.vuejs.org/
npm install vuex@next --save 

# Composition API 用法
# https://next.vuex.vuejs.org/guide/composition-api.html#accessing-state-and-getters

store/index.ts

import { createStore, createLogger } from 'vuex'
import * as getters from './getters.ts'
import * as mutations from './mutations.ts'
import * as actions from './actions.ts'
import example from './modules/example.ts'

const debug = process.env.NODE_ENV !== 'production'

const store = createStore({
  state() {
    return {
      count: 10
    }
  },
  getters: {
    double(state) {
      return state.count * 2
    }
  },
  mutations,
  actions,
  modules: {
    example
  },
  strict: debug
})

export default store

Sass

npm i sass --save-dev
# https://vitejs.dev/guide/features.html#css-pre-processors

生命周期

Option-API VS Compisition-API

beforeCreate  -> use setup()
created       -> use setup()
beforeMount   -> onBeforeMount
mounted       -> onMounted
beforeUpdate  -> onBeforeUpdate
updated       -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed     -> onUnmounted
errorCaptured -> onErrorCaptured

填坑记录

1. npm run dev报错
   v2.0.0-beta.12、v2.0.0-beta.22在windows 10环境下会报错，使用beta.21版本

相关资料

https://vitejs.dev/guide
https://v3.cn.vuejs.org/
https://next.router.vuejs.org/
https://next.vuex.vuejs.org/
https://www.jianshu.com/p/0ebd56cb22d2
https://www.cnblogs.com/QQPrincekin/p/13802421.html
https://github.com/vue3/vue3-router4-typescript