<optgroup id="kjtai"><li id="kjtai"><source id="kjtai"></source></li></optgroup><acronym id="kjtai"><sup id="kjtai"></sup></acronym>

    <legend id="kjtai"><i id="kjtai"></i></legend>
    <span id="kjtai"><sup id="kjtai"></sup></span>
    <track id="kjtai"></track>
    1. 代码改变世界

      Vue3(三)CND + ES6的import + 工程化的目录结构 = 啥?

      2021-02-01 17:01  金色海洋(jyk)  阅读(0)  评论(0编辑  收藏

      突发奇想

      这几天整理了一下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文件。
      如图:
      cnd目录结构.png

      好吧,这里用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" >
        <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的了解更深入了一点点。

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

      在线演示

      https://naturefwvue.github.io/nf-vue-cnd/cnd/project/

      源码

      https://github.com/naturefwvue/nf-vue-cnd/tree/main/cnd/project

      2
      手机购彩 五五开骂人 | 体验了俄罗斯人肉转盘 | 秋天的古诗大全300首 | 马航唯一幸存者被找到 | 不摇碧莲什么意思 | 草泥马之歌歌词 | 帝鳄vs恐鳄 | 骂人最狠的话不带脏字 | 百家姓排名图片 | 宝批龙 | 都市花园梦 | 云南山歌视频粗话对唱 | 蛇王饶了我 | 非典死了多少人真相 | 骂人的歌曲最火的 | 质数表口诀 | 黑道小说排行榜完本50 | 李白搞笑诗句大全 | 高智商报仇的方法 | 骂渣男的短句 越毒越好 |