目标
实现CDN引用全家桶, 引用element, sass, 路由, 仓储, element组件, 自定义组件
项目结构
vite.config.js
import vue from "@vitejs/plugin-vue";
import commonjs from "rollup-plugin-commonjs";
import externalGlobals from "rollup-plugin-external-globals";
// 全局对象
let globals = externalGlobals({
vue: "Vue",
vuex: "Vuex",
vueRouter: "VueRouter",
"element-plus": "element"
})
const plugins = process.env.NODE_ENV === 'production' ? [] : [commonjs(), globals]
export default {
plugins: [
vue(),
...plugins
],
css: {
preprocessorOptions: {
scss: {
charset: false
}
}
},
build: {
target: 'es2015',
assetsDir: './static',
rollupOptions: {
external: ['vue', 'vuex', 'vueRouter' ],
plugins: [
commonjs(),
globals
],
},
},
};
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="./static/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<script src="/static/js/vue.js"></script>
<script src="/static/js/vue-router.js"></script>
<script src="/static/js/vuex.js"></script>
<script src="/static/js/element-plus.js"></script>
<link rel="stylesheet" href="/static/css/element-plus.css">
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
main.js
import store from './store/index.js'
import router from './router.js'
import App from './app.vue'
import './assets/base.scss'
// 创建vue3的实例
const app = Vue.createApp(App)
.use(store) // 挂载vuex
.use(router) // 挂载路由
.use(ElementPlus) // 加载ElementPlus
.mount('#app') // 挂载Vue的app实例
router.js
const routes = [
{
path: '/',
name: 'Home',
component: () => import('./views/home.vue')
},
{
path: '/component',
name: 'component',
component: () => import('./views/component.vue')
}
]
const router = VueRouter.createRouter({
history: VueRouter.createWebHistory(),
routes
})
export default router
app.vue
<template>
<div>
<img src="https://v3.cn.vuejs.org/logo.png" />
<br />
<div class="nav">
<router-link to="/">路由</router-link>
<router-link to="/component">组件</router-link>
<router-link to="/state">仓储</router-link>
</div>
<router-view class="router-view"></router-view>
<hr />
vuex状态演示<br />
$store - count：{{ $store.state.count }}<br />
<el-button @click="setCount">vuex的 计数</el-button><br />
</div>
</template>
<script>
export default {
name: 'app',
setup() {
const store = Vuex.useStore();
const setCount = () => {
store.commit("setCount");
};
return {
setCount,
};
},
data() {
return {
};
},
methods: {
},
components: {
},
};
</script>
<style lang="scss">
#app {
text-align: center;
color: #2c3e50;
.nav {
a {
margin-left: 20px;
}
}
}
</style>
home.vue
<template>
<div class="home">
<h3>首页</h3>
<el-button @click="$router.push({
path: '/state',
query: {
name: '张三',
foods: ['西红柿炒蛋', '红烧肉']
}
})" class="mg-right-10">去看store</el-button>
</div>
</template>
<script>
export default {
name: 'home',
data() {
return {
};
},
methods: {
},
components: {
},
};
</script>
<style lang="scss">
.home {
}
</style>
store
export default Vuex.createStore({
state: {
count: 0,
food: []
},
getters: {
getCount: (state) => {
return state.count
},
// 只读
getFood: (state) => {
return Vue.readonly(state.food)
},
},
mutations: {
setCount(state) {
state.count++
},
setFood(state, food) {
state.food = food
},
addFood(state, food){
if (Array.isArray(food)) {
state.food.concat(food)
} else {
state.food.push(food)
}
}
},
actions: {
},
modules: {
}
})
