突发奇想

这几天整理了一下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文件。如图： Vue3（三）CND + import + 工程化的目录结构 = 啥？

好吧，这里用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>&nbsp;&nbsp;&nbsp;
        <router-link :to="{name:'state'}">查看状态管理</router-link>&nbsp;&nbsp;&nbsp;
        <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的了解更深入了一点点。

不断学习，不断折腾，不断进步嘛。

在线演示

naturefwvue.github.io/nf-vue-cnd/…

源码

github.com/naturefwvue…

Vue3（三）CND + import + 工程化的目录结构 = 啥？

突发奇想

项目结构

文件介绍

入口页面 index.html

main.js

App.js

home

加载组件的方法

组件

路由

状态管理

优缺点

缺点

优点

和vite的区别

小结

在线演示

源码

常见问题FAQ

掘金(金色海洋) SVIP

发表评论

如需帝国cms功能定制以及二次开发请联系我们

升级SVIP会员

工作时间

突发奇想

项目结构

文件介绍

入口页面 index.html

main.js

App.js

home

加载组件的方法

组件

路由

状态管理

优缺点

缺点

优点

和vite的区别

小结

在线演示

源码

常见问题FAQ

掘金(金色海洋) SVIP

相关推荐

发表评论

如需帝国cms功能定制以及二次开发请联系我们

升级SVIP会员

工作时间

请选择支付方式