Vue3（三）CND + ES6的import + 工程化的目录结构 = 啥？
突发奇想
这几天整理了一下vue的几种使用方式，对比之后发现有很多相似之处，那么是不是可以混合使用呢？比如这样：
- vue的全家桶和UI库，采用传统的方式加载（CND、script）。
- 自己写的js代码，采用ES6的 import 方式加载。
- 目录结构采用vuecli建立的项目的目录结构。
- 入口页面用vite项目的 index.html。
- 不用babel做转义（因为还不会用）。
- 不用webpack（因为总是报错，头痛...）。
这种结合会怎么样？我们来看看具体情况。
心急的可以先看看在线演示：https://naturefwvue.github.io/nf-vue-cnd/cnd/project/
项目结构
目录结构完全按照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="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 rel="stylesheet" href="https://unpkg.com/element-plus@1.0.2-beta.30/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-plus@1.0.2-beta.30/lib/index.full.js"></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的了解更深入了一点点。
不断学习，不断折腾，不断进步嘛。
在线演示
https://naturefwvue.github.io/nf-vue-cnd/cnd/project/
源码
https://github.com/naturefwvue/nf-vue-cnd/tree/main/cnd/project
Vue3（三）CND + ES6的import + 工程化的目录结构 = 啥？的更多相关文章
- ES6模块import细节
写在前面,目前浏览器对ES6的import支持还不是很好,需要用bable转译. ES6引入外部模块分两种情况: 1.导入外部的变量或函数等: import {firstName, lastName, ...
- React与ES6（三）ES6类和方法绑定
React与ES6系列: React与ES6(一)开篇介绍 React和ES6(二)ES6的类和ES7的property initializer React与ES6(三)ES6类和方法绑定 React ...
- 探讨ES6的import export default 和CommonJS的require module.exports
今天来扒一扒在node和ES6中的module,主要是为了区分node和ES6中的不同意义,避免概念上的混淆,同时也分享一下,自己在这个坑里获得的心得. 在ES6之前 模块的概念是在ES6发布之前就出 ...
- ES6 import 引用文件夹/目录及其处理过程
1.现象 看redux的时候发现官网的教程里直接import了一个文件夹,我再三确定没有看错, 是一个 文件夹 (Directory), 它直接 import了一个目录!这个 文件夹/目录 底下还有一 ...
- vue中添加util公共方法&&ES6之import、export
vue中添加util公共方法&&ES6之import.export https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Re ...
- 第三百九十四节，Django+Xadmin打造上线标准的在线教育平台—Xadmin后台进阶开发配置2，以及目录结构说明
第三百九十四节,Django+Xadmin打造上线标准的在线教育平台—Xadmin后台进阶开发配置2,以及目录结构说明 设置后台列表页面可以直接修改字段内容 在当前APP里的adminx.py文件里的 ...
- 输入三个double型的数据，放入到a,b,c三个变量中去，使用条件结构与交换逻辑将这三个变量中的值从小到大排列。
import java.util.Scanner; public class C8{ public static void main(String []args){ /* 8.输入三个double型的 ...
- C#开发奇技淫巧三：把dll放在不同的目录让你的程序更整洁
系列文章 C#开发奇技淫巧一:调试windows系统服务 C#开发奇技淫巧二:根据dll文件加载C++或者Delphi插件 C#开发奇技淫巧三:把dll放在不同的目录让你的程序更整洁 程序目录的整理 ...
- vue学习笔记（三）——目录结构介绍
1.初始目录结构如下: 2.目录结构介绍 目录/文件 说明 build 最终发布的代码存放位置. config 配置目录,包括端口号等.我们初学可以使用默认的. node_modules npm 加载 ...
随机推荐
- MySQL为Null会导致5个问题，个个致命！
在正式开始之前,我们先来看下 MySQL 服务器的配置和版本号信息,如下图所示: "兵马未动粮草先行",看完了相关的配置之后,我们先来创建一张测试表和一些测试数据. -- 如果存在 ...
- Spring框架的IOC（控制反转）
1.1.IoC是什么 Ioc-Inversion of Control,即"控制反转",不是什么技术,而是一种设计思想.在Java开发中,Ioc意味着将你设计好的对象交给容器控制, ...
- 手写实现JDK的动态代理
Person接口 package com.zhoucong.proxy.jdk; public interface Person { // 寻找真爱 void findlove(); } 人物实现类 ...
- Mac上“您没有权限来打开应用程序”（Big Sur）
最近电脑更新了Macos的最新11版大苏尔 Big Sur.很快问题就出现了:安装某个软件的时候Key Gen打不开,提示您没有权限来打开应用程序,类似这样:https://zhuanlan.zhih ...
- FastApi 进阶
前言 终于有了第一个使用 FastApi 编写的线上服务, 在开发的过程中还是遇到了些问题, 这里记录一下 正文 目录结构 我们知道, FastApi 的启动方式推荐使用 uvicorn, 其启动方式 ...
- IPC 经典问题：Reader & Writer Problem
完整代码实现: #include <stdio.h> #include <unistd.h> #include <time.h> #include <stdl ...
- Linux应急响应--入侵排查
1.入侵者可能会删除机器的日志信息,可以查看日志信息是否还存在或者是否被清空,相关命令示例: ll -h /var/log/* 系统日志一般都存在/var/log下常用的系统日志如下:核心启动日志: ...
- 克隆slave
在日常生活中,我们做的比较多的操作就是在线添加从库,比如线上有一主一丛两个数据库,由于业务的需要一台从库的读取量无法满足现在的需求,这样就需要我们在线添加从库,出于安全考虑,我们通常需要在从库上进行在 ...
- 【Problems】端口被占用 查看是被谁占用并关闭它
文章目录 Windows Linux 经常在Windows.Linux环境下运行JavaWeb项目,Tomcat的端口被占用了. 端口被占用就查看是被谁占用关闭它就行. Windows 在Window ...
- drop table 命令不回收以前的相关访问权限
drop table 命令不回收以前的相关访问权限,也就是说假如我现在把表删除了,然后再创建一个同名的表时,会自动赋予权限的.