vue3和vite发布有一段时间了，最近终于有点闲暇时间，赶个末班车体验一把。
一、基础配置
-
全局安装create-vite-app
npm install -g create-vite-app
2.创建项目
// 下面两个命令都可以
create-vite-app vue3-common
cva vue3-common
3.手动安装下依赖包
npm install
package.json 中可以看到依赖非常少，只有 vite 和 @vue/compiler-sfc ，没有 babel，因为 vite 是通过浏览器去解析模块
4. 安装typescript
在src下会有一个文件shims-vue.d.ts，是为了 typescript 做的适配定义文件，因为.vue 文件不是一个常规的文件类型，ts 是不能理解 vue 文件是干嘛的，加这一段是是告诉 ts，vue 文件是这种类型的。
declare module '*.vue' {
import { defineComponent } from 'vue'
const component: ReturnType<typeof defineComponent>
export default component
}
ts的详细使用语法，可以看我的这篇文章
5.vite.config.ts 配置
根目录下创建 vite.config.ts ，添加配置：
用的是vite打包不是vue-cli 的webpack,api的使用会有些许不同，具体的使用可以查看vite中文官网
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import viteCompression from 'vite-plugin-compression'
function pathResolve(dir: string) {
return resolve(__dirname, '.', dir)
}
const proxyTarget = '' // 本地proxy
export default () => {
return defineConfig({
plugins: [
vue(),
viteCompression({
algorithm: 'gzip',
threshold: 10240,
}),
],
resolve: {
alias: [
{
find: /^\/@\//,
replacement: pathResolve('src') + '/',
},
{
find: /^\/_img\//,
replacement: pathResolve('src/assets/images') + '/',
},
],
},
server: {
port: 8080, // 启动端口
open: true,
proxy: {
'/LOCAL_URL': {
target: proxyTarget,
changeOrigin: true,
rewrite: (p) => p.replace(/^\/LOCAL_URL/, ''),
},
},
},
})
}
6. 启动项目
npm run dev
比起之前用vue-cli创建的项目，本地启动速度确实有质的飞跃，亲测秒开
二、全家桶配置
1、安装 vue-router@4.0.12
// 查看版本
npm info vue-router versions
// 安装
npm install vue-router@4.0.12
在src下新建router文件
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
const routes: Array<RouteRecordRaw> = [
{
path: '/',
redirect: '/home',
},
{
path: '/home',
component: () => import('/@/views/home/index.vue'),
},
{
path: '/my',
component: () => import('/@/views/my/index.vue'),
},
]
// 开启历史模式
// vue2中使用 mode: history 实现 createWebHistory()
// vue2中使用 mode: hash 实现 createWebHashHistory()
const router = createRouter({
history: createWebHashHistory(), // 替代之前的 mode，是必须的
routes,
scrollBehavior: () => ({ left: 0, top: 0 }),
})
router.beforeEach((to, from, next) => {
console.log('beforeEach----')
next()
})
router.afterEach(() => {
window.scrollTo(0, 0)
})
export default router
在main.ts中注册
import router from '/@/router'
app.use(store)
api具体使用方法，可以查看vue-router4.x官网
2、安装vuex@4.0.2
npm install vuex@4.0.2
在src下新建store文件
import { createStore } from 'vuex'
export default createStore({
state: {},
mutations: {},
actions: {},
modules: {},
})
在main.ts中注册
import store from '/@/store'
app.use(store)
api具体使用方法，可以查看vuex4.x官网
3、安装 element-plus
npm install element-plus
在main.ts中注册
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
app.use(ElementPlus, { size: 'small' })
详细的使用方法，可以查看element plus官网
4、main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import App from './App.vue'
import router from '/@/router'
import store from '/@/store'
;(async () => {
const app = createApp(App)
app.use(ElementPlus, { size: 'small' })
app.use(store)
app.use(router)
app.mount('#app', true)
})()
其实项目的目录结构、使用方式，和我们熟悉的vue-cli大体相似
三、vue3
1.Vue 2 和 Vue 3 的区别
90% 的写法完全一致，除了以下几点
- Vue 3 的 Template 支持多个根标签，Vue 2 不支持
- 弃用全局API
new Vue,使用createApp - Composition API
- ......
接下来会出一个专题，用于介绍vue3的新特性，敬请期待。。。
vue3详细的api使用方法，可以查看vue3的官网
通用框架的完整代码，都已经上传到了github，可以自行拉取。后面也会继续完善框架，并同步代码。
[vue3+vite 框架完整代码
github.com/ddhujiang/vue3-common](link.zhihu.com/?target=htt…)
创作不易，Fork、star、follow一下吧
