吐吐槽
我只是想学一下vue，官网上说vue是“渐进式的”，啥意思呢？一直是晕晕的。那么只好用笨办法了——官网的代码一行一行敲出来看看效果呗。
简单的都学的差不多了，然后发现大家都在用“工程化”的方式做开发。
那么继续吧，但是，，，
webpack、node、npm、cnpm、yarn、脚手架、开发环境、测试环境、生产环境、各种安装、各种创建。
好在 vue3 不容易报错了，想当初 vue2.x 的时候各种报错，看到错误就只能干瞪眼，这都是啥？好像是webpack的报错。
当初学 vue2 就卡在了建立项目上，各种尝试居然一个项目都没跑起来。
如果像jQuery那样直接开鲁那多简单呀！
不会 webpack 还想学 vue 者的福音
各种阴差阳错+机缘巧合的情况下，弄出来了这种在 CND 模式下仿工程化开发的方式。一开始只是想方便我做在线演示，后来各种完善，发现还是应该有点搞头了。再加上大神在弄vite，似乎也是对webpack比较头疼。。。
好了不墨迹了，开始说我的做法。
vue全家桶和UI库的加载方式
这个很传统了，官方也支持。
<script src="https://unpkg.com/vue@3.0.5/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue-router@4.0.3/dist/vue-router.global.js"></script>
<script src="https://unpkg.com/vuex@4.0.0-rc.2/dist/vuex.global.js"></script>
<link href="https://unpkg.com/element-plus@1.0.2-beta.30/lib/theme-chalk/index.css" rel="stylesheet">
<script src="https://unpkg.com/element-plus@1.0.2-beta.30/lib/index.full.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
浏览器会对js文件做缓存，第一次有点慢，后缓存后就快了。
某网站有时候会卡一下，不卡的话还是很快的。
js代码的加载方式
<script type="module" src="src/main.js?v=4"></script>
听说vite也是这么加载的。好吧就是从vite建立的项目里copy来的。
要加上 type="module" 否则加载不了。
文件夹结构和代码编写风格
文件夹当然是把工程化的拿过来之间用了，挺简洁明了的。
因为浏览器也支持 import 的方式加载js，那么也就是说，CDN方式下也可以用import加载。那么js代码方面也不会有太大的差别。
我们来对比一下：
左面是CND的项目，右面是工程化的项目。
- 文件夹结构完全一致，
- js文件都能对应上
- vue文件拆分成 html + js 两个文件（app.vue除外）
main.js
/*
import store from './store/index.js?v=1'
import router from './router/index.js?v=1'
import App from './app.js?v=1'
// 创建vue3的实例
const app = Vue.createApp(App)
.use(store)
.use(router)
.use(ElementPlus)
.mount('#app')
*/
const ver = window.__ver || ''
Promise.all([
import('./store/index.js' + ver),
import('./router/index.js' + ver),
import('./app.js' + ver),
]).then((res) => {
// 创建vue3的实例
const app = Vue.createApp(res[2].default)
.use(res[0].default) // 挂载vuex
.use(res[1].default) // 挂载路由
.use(ElementPlus) // 加载ElementPlus
.mount('#app') // 挂载Vue的app实例
})
注释掉的代码，和工程化里的代码是一致的，只是这种方式只支持常量，所以想把版本加在url地址上面就比较麻烦。
所以改为了这种异步的方式，这样可以把版本号给拼接上去。这样更新浏览器的js缓存就方便多了。
app.js
export default {
name: 'app',
setup() {
do something...
return {
}
}
}
工程化项目里面是App.vue，对应的是网页里 id=“app” 的div。
这里改成纯js文件的形式，因为模板就是index.html的div。
好吧，其实是main.js里面的加载方式不知道要怎么改。。。
router
const routes = [
{
path: '/',
name: 'Home',
component: () => myImport('views/home')
},
{
path: '/About',
name: 'About',
component: () => myImport('views/About')
},
{
path: '/component',
name: 'component',
component: () => myImport('views/component')
},
{
path: '/store',
name: 'store',
component: () => myImport('views/store')
}
]
const router = VueRouter.createRouter({
history: VueRouter.createWebHistory(),
routes
})
export default router
动态路由
这里采用动态路由的方式，另外换成了我自己封装的函数，可以加载html和js文件，然后变成动态组件的方式，这样组件就可以被路由加载了。路径设置问题
本来想把html和js文件放在一个文件夹里面，就可以用同一个url加载了，结果和我想的不一样。
由于加载 html 和加载 js 的路径规则不太一样，再加上路由导航的原因，
所以只好用 src 作为分隔标识，统一从src开始计算路径。
myImport
// 直接放在Window里面好了。。。
window.myImport = (url) => {
return new Promise((resolve, reject) => {
const ver = window.__ver || ''
const baseUrl = window.__basrUrl || '/src/'
// 先加载js
import(baseUrl + url + '.js' + ver).then((resjs) => {
const js = resjs.default
if (js.template === '') {
// 如果模板是空的，表示需要加载html作为模板
axios.get(baseUrl + url + '.html' + ver).then((resHTML) => {
js.template = resHTML.data
resolve(js)
})
} else {
// 否则直接使用js注册组件
resolve(js)
}
})
})
}
一开始还想做个插件挂到vue上面，后来试了半天没成功。
然后觉得自己挺傻的，cnd环境，一个静态函数，直接挂在Window上面不就行了吗。
加载 js 和 html
先用 import 异步加载 js，目的是便于拼接url，然后判断是否有template。
如果有的话，就不加载html了。
如果没有的话，在用axios加载html，然后设置给template，这样就变成了一个标准的js组件。是否会重复加载？
组件自带缓存机制，第一次会加载，以后就不会重复加载了。
store
import { Set_Count } from './mutation-types.js'
export default Vuex.createStore({
state: {
count: 0,
myObject: {
time: '现在的时间：'
},
myArray: [1,2,2,3,4]
},
getters: {
getAddCount: (state) => {
return state.count + 1
}
},
mutations: {
// 计数器
setCount(state, num = 1) {
state.count += num
},
[Set_Count](state, num = 1) {
state.count += num
}
},
actions: {
},
modules: {
}
})
基本上没啥区别。
如何方便的写模板
直接看图，更清晰一些。
一边写js代码，另一边写模板。这样也是很方便的。
一开始想在浏览器里面直接加载vue文件，然后处理成js组件。
想了半天，理论上应该可以，但是我这水平估计够呛，所以采用了这种折中的方式。
组件里面加载组件
- defineAsyncComponent
这个是Vue提供的异步组件，如果在工程化里面，可以直接加载vue文件。
我在cnd里面试了一下，没成功。所以只好用纯js组件的方式。
动态路由不需要套这个，但是异步组件就要套上，否则没有效果。
搭一个梯子
这样做项目和 jQuery 的风格挺像的，文件copy过来，建立个网站就可以开鲁了。
同时代码编写方式又采用工程化的方式，熟悉之后可以方便的切换的工程化的开发方式。
就好像在 jQuery 与 vue 的工程化直接搭了一个梯子，应该大概可以方便我们翻过去吧。
便于调试
-
设置断点看状态。
005断点.png -
看成员
006看看都有啥.png -
进到内部了，好吧其实我都看不懂。。。
007内部.png
js文件的缓存问题
缓存是个好东东，避免我们重复加载js文件，加快页面显示速度，但是如果我们的js改了，浏览器却还是在用缓存怎么办？
我们可以设置一个版本号，加载文件后面就可以。当更新的时候，改一下版本号，就可以重新加载了。
源码
https://github.com/naturefwvue/nf-vue-cnd/tree/main/cnd/project-template
在线演示
https://naturefwvue.github.io/nf-vue-cnd/cnd/project-template/
一开始可能会有的卡，第一次点导航会加载文件，所以会慢一点，以后就好了。好像应该加一个加载中的状态。
