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: {
  }
})

仍是同樣，區別就在於加載方式。
這裏只是一個最簡單的演示，之後會詳細介紹。