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

时间 2021-02-01

标签 css html vue react webpack git github web vue-router vuex 栏目 JavaScript 繁體版

原文原文链接

突发奇想

这几天整理了一下vue的几种使用方式，对比以后发现有不少类似之处，那么是否是能够混合使用呢？好比这样：css

vue的全家桶和UI库，采用传统的方式加载（CND、script）。
本身写的js代码，采用ES6的 import 方式加载。
目录结构采用vuecli创建的项目的目录结构。
入口页面用vite项目的 index.html。
不用babel作转义（由于还不会用）。
不用webpack（由于老是报错，头痛...）。

这种结合会怎么样？咱们来看看具体状况。html

心急的能够先看看在线演示：https://naturefwvue.github.io/nf-vue-cnd/cnd/project/vue

项目结构

目录结构彻底按照cli（脚手架）创建的项目的文件夹来设定，只是把.vue文件改为了.js文件。
如图：
react

好吧，这里用src不太准确，由于这些都是能够直接在浏览器里面运行的代码。webpack

文件介绍

没有.vue文件，而是用.js文件取代，由于原生js不支持.vue文件，看官网说明，彷佛须要Babel + webpack才能支持，而这两个我又都不会。因此暂时不用.vue文件了。git

入口页面 index.html

这个index.html是从vite里面拷贝出来的，用vite创建项目的时候，还觉得不须要webpack了呢，后来发现本身太天真了，不过这个页面却是能够拿来用用。github

<!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的方式。web
路由导航
正常设置就能够。vue-router
import 方式引用 js代码
使用下面的方式。vuex

<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