前言:
现在小伙伴们对“vue3项目案例”都比较着重,各位老铁们都想要了解一些“vue3项目案例”的相关知识。那么小编同时在网摘上收集了一些对于“vue3项目案例””的相关内容,希望姐妹们能喜欢,我们一起来学习一下吧!突发奇想
这几天整理了一下vue的几种使用方式,对比之后发现有很多相似之处,那么是不是可以混合使用呢?比如这样:
vue的全家桶和UI库,采用传统的方式加载(CND、script)。自己写的js代码,采用ES6的 import 方式加载。目录结构采用vuecli建立的项目的目录结构。 入口页面用vite项目的 index.html。不用babel做转义(因为还不会用)。不用webpack(因为总是报错,头痛...)。
这种结合会怎么样?我们来看看具体情况。
心急的可以先看看在线演示:
项目结构
目录结构完全按照cli(脚手架)建立的项目的文件夹来设定,只是把.vue文件改成了.js文件。
如图:
好吧,这里用src不太准确,因为这些都是可以直接在浏览器里面运行的代码。
文件介绍
没有.vue文件,而是用.js文件取代,因为原生js不支持.vue文件,看官网说明,似乎需要Babel + webpack才能支持,而这两个我又都不会。所以暂时不用.vue文件了。
入口页面 index.html
这个index.html是从vite里面拷贝出来的,用vite建立项目的时候,还以为不需要webpack了呢,后来发现自己太天真了,不过这个页面倒是可以拿来用用。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="icon" href="public/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>一种怪异的方式</title> <script src=";></script> <script src=";></script> <script src=";></script> <link rel="stylesheet" href=";> <script src=";></script></head><body> <div> 这是一个尝试... </div> <div id="app"> <div id="nav"> <p> <router-link :to="{name:'Home'}">首页</router-link> <router-link :to="{name:'state'}">查看状态管理</router-link> <router-link :to="{name:'component'}">查看组件加载</router-link> </p> <router-view></router-view> </div> <hr> vuex状态演示<br> $store - count:{{$store.state.count}}<br> <el-button type="primary" @click="setCount">vuex的 计数</el-button><br> <hr> <script type="module" src="src/main.js?v=9"></script></body></html>全家桶,这个用传统的script来引入,没尝试import的方式。路由导航,正常设置就可以。import 方式引用 js代码
使用下面的方式。
<script type="module" src="src/main.js?v=2"></script>
type 要写 "module",否则会报错。
后面加v=2,目的是为了可以更新缓存。
main.js
import store from './store/index.js?v=6'import router from './router/index.js?v=8'import App from './app.js?v=6'// 创建vue3的实例const app = Vue.createApp(App) .use(store) // 挂载vuex .use(router) // 挂载路由 .use(ElementPlus) // 加载ElementPlus .mount('#app') // 挂载Vue的app实例
这个看着是不是很眼熟,和 vuecli 建立的项目基本没啥区别,您没看错,确实可以这么写。
至于为啥要加个 v=8 ?还不是因为缓存不更新的问题嘛。只是import只支持常量,不支持变量,想把版本号做个参数,都做不了。
App.js
const App = { setup() { // 传说中的setup const store = Vuex.useStore() // 状态的控制事件 const setCount = () =>{ store.commit('setCount') } return { // 返回给模板,否则模板访问不到。 setCount } } } export default App
template
没有设置模板的话,div内容会被保留,否则会被覆盖。
简单的状态的演示,其他的各种方法也都是可以用,不写那么多了。
离模板有点远,所以写的时候容易蒙,所以要把功能分散到其他页面(组件)里面,这里主要是一个入口功能。
home
const testManage = () => { const hello = Vue.ref('你好,世界') const clickMe = () => { hello.value = '好的,收到' + new Date().valueOf() } return { hello, clickMe }}// vue3的对象const home = { template: ` <h2>这是home</h2> <div> 我是{{value.name}}。<br> 老规矩:{{hello}}<br> <input type="button" value="快点我" @click="clickMe"/><br><br> 本项目采用“混合”模式开发,<br> vue全家桶和UI库用script标签加载。<br> 代码用import方式加载。<br> 目录结构参考了cli建立的项目。<br> 支持组件、路由、状态管理等功能。<br> 状态计数:{{$store.state.count}} </div> `, setup() { // 使用外面的定义,分解setup内部的代码 const { hello, clickMe } = testManage() const value = Vue.reactive({ name: 'jyk' }) return { value, hello, clickMe } } } export default home
这么写模板,真的很麻烦,编辑器一点忙都不给帮,累死宝宝了。
这里区别就有点大了,首先模板只能用 template 的方式来写,
另外不能直接写css,如果还是想写的话,目前想到的方法只能用vue的那种了。
加载组件的方法
// 引入组件import test from '../component/test.js?v=7'const demo = { template: ` <h2>这是组件演示</h2> <test str="传入的参数"></test> `, components: { test }, setup() { return { } } } export default demo
还是可以用import的方式加载组件,只是不能直接加.vue的文件,而是要变成.js的文件。
组件
const test = { template: ` 这是 组件测试<br> 参数:{{str1}}<br> `, model: { prop: ['str'] }, props: { str: String }, setup(props) { // 在setup里面获取参数值 const str1 = Vue.ref(props.str) return { str1 } } } export default test
其实吧,vue里面都是组件,只是,其实没啥本质区别,只有使用方式的不同。这里只是写了一下属性的获取和显示。另外就是为了让另一个组件来加载。
路由
// import Home from '../views/home.js?v=2'const routes = [ { path: '/', name: 'Home', component: () => import('../views/home.js?v=8') }, { path: '/state', name: 'state', component: () => import('../views/state.js?v=8') }, { path: '/component', name: 'component', component: () => import('../views/component.js?v=8') }]const router = VueRouter.createRouter({ history: VueRouter.createWebHistory(), routes})export default router
这个代码也是很眼熟的,代码基本一样,加上"VueRouter." 就行。
路由可以加载组件,也可以传递参数给组件,细节就不写了。以后可能会详细介绍。
异步加载:
现在可以体验到异步加载的感觉了。
一开始路由对应的组件并不会被下载,而是在第一次点导航的时候才会开始下载(按F12看的很清楚)。
所以第一次点导航的时候会有一点点卡的感觉,当然这和网站的速度有关。
当然再次点导航的时候,就不会重复下载了。
状态管理
export default Vuex.createStore({ state: { count: 0, myObject: { time: '现在的时间' } }, getters: { getCount: (state) => { return state.count }, getMyObject: (state) => { return Vue.readonly(state.myObject) }, getTime: (state) => { return state.myObject.time } }, mutations: { setCount(state) { state.count++ }, setTime(state) { state.myObject.time = '现在时间:' + new Date() } }, actions: { }, modules: { }})
还是一样,区别就在于加载方式。
这里只是一个最简单的演示,以后会详细介绍。
优缺点
基本功能都实现了,我们来分析一下。
缺点
先说缺点吧。
组件的模板部分编写很麻烦,因为就是一个大字符串,各种辅助功能完全用不上,全凭经验。没有开发环境,需要自己配置个web服务网站。代码改完了,需要按F5刷新才能更新,而且还有个缓存的问题,关掉缓存吧,每次刷新都要花好多时间加载;如果打开的话,又要想办法更新。没有按需加载的功能,vue的全家桶、UI库,不管用多少功能,统统都要下载。js代码没有做处理,各种空格、换行符统统没有去掉,占用空间大,不保密,代码可以随便看。 扩展性未知,其他的第三方是否支持也都不清楚。 其他各种缺点。 优点 简单粗暴,不用管那么多,可以直接开鲁代码。 很方便做在线演示。(其实主要是为了这个目的才折腾的) 因为没有打包这个步骤,所以可以部分更新代码。
好像也没啥优点了。
和vite的区别
用vite建立了一个项目,简单的尝试了一下,虽然用 也是用 import 加载,但是还是需要babel和webpack,当然这也是必须的,否则.vue怎么处理?这是vue的一大特色,不能扔掉。
小结
生命在于不断地折腾。也许这种折腾根本就没啥意义。
以前用工程化的方式写代码,总是非常坎坷,因为各种报错。后来熟悉了,不会报错了(或者是知道要如何处理),但是感觉对vue的了解还是停留在表面,稍微深入一点就不知道了。
于是去啃ES6,尝试cnd的方式,现在感觉对vue的了解更深入了一点点。
不断学习,不断折腾,不断进步嘛。
在线演示
源码
标签: #vue3项目案例