工程化的開發(fā)方式

這是開發(fā)中盆犁、大型項(xiàng)目的必備技能，網(wǎng)上資料也很多篡九，這里只是一個(gè)簡單的綜合性的介紹谐岁。包括vue的全家桶、建立項(xiàng)目的幾種方式榛臼、UI庫的簡單使用等伊佃。
可以和上一篇的cnd方式做項(xiàng)目做一下對比。

node.js沛善，npm航揉、cnpm、yarn

node.js

執(zhí)行 npm run serve 金刁，然后就可以在瀏覽器里面訪問了帅涂，那么這是怎么做到的呢议薪？
這個(gè)就要?dú)w功于node了。建立項(xiàng)目的時(shí)候媳友，會自動創(chuàng)建一個(gè)node的服務(wù)斯议，這樣我們就可以邊寫代碼，邊看運(yùn)行效果了醇锚。
所以工程化開發(fā)哼御，首先要安裝一個(gè)node。安裝方法網(wǎng)上已經(jīng)有很多了焊唬，這里就不搬運(yùn)了艇搀。
大家也不用擔(dān)心，不會用node怎么辦求晶。這個(gè)是自動化的焰雕，記住幾個(gè)命令就行。

然后要掌握一個(gè)安裝包的技能芳杏，npm矩屁、cnpm、yarn都是包管理的工具爵赵。

npm

因?yàn)樾枰獜膰夥?wù)器下載需要的文件吝秕，所以安裝包的速度會很慢。如果不發(fā)布自己的包的話空幻，那么就沒有必要用這個(gè)了烁峭。
安裝node后，一般會自動安裝npm秕铛。

cnpm

是淘寶團(tuán)隊(duì)做的一個(gè)國內(nèi)鏡像约郁，cnpm會從國內(nèi)服務(wù)器下載需要的文件，所以速度就非车剑快了鬓梅，除了不能發(fā)布包之外，其他功能和npm是一樣的谨湘。

• 安裝方式：

npm install -g cnpm --registry=https://registry.npm.taobao.org

yarn

Yarn是facebook發(fā)布的一款取代npm的包管理工具绽快。
yarn會緩存下載的文件，雖然第一次會有點(diǎn)慢紧阔，但是以后就會非撤话眨快了，而且還可以并行下載擅耽。所以推薦使用 yarn 做資源包的管理工具活孩。

• 安裝方式：

npm install -g yarn

• 使用方式

yarn --version   // 查看版本
yarn init // 同npm init，執(zhí)行輸入信息后秫筏，會生成package.json文件
yarn add [package] // 在當(dāng)前的項(xiàng)目中添加一個(gè)依賴包诱鞠，會自動更新到package.json和yarn.lock文件中
yarn upgrade  // 用于更新包到基于規(guī)范范圍的最新版本
yarn install //安裝package.json里所有包，并將包及它的所有依賴項(xiàng)保存進(jìn)yarn.lock
yarn serve // 開發(fā)環(huán)境下運(yùn)行vue3的項(xiàng)目
yarn publish   // 發(fā)布包
yarn remove [package] // 移除依賴包

也可以到官網(wǎng)下載安裝：https://yarn.bootcss.com/docs/install/#windows-stable

安裝Vue

# 最新穩(wěn)定版
yarn add vue@next
# OR
cnpm install vue@next

安裝腳手架

yarn global add @vue/cli@next
# OR
npm install -g @vue/cli@next

建立項(xiàng)目

目前有兩種方式創(chuàng)建Vue3的項(xiàng)目：

• 傳統(tǒng)的腳手架（cli）的方式这敬，完善航夺、全面、穩(wěn)定崔涂、成熟阳掐。
• 新的vite的方式，似乎還在完善中冷蚂，可以嘗嘗鮮缭保。

cli 腳手架的方式建立項(xiàng)目

官網(wǎng)：https://cli.vuejs.org/zh/guide/
其優(yōu)點(diǎn)就是可以自動創(chuàng)建項(xiàng)目目錄結(jié)構(gòu)和需要的各種文件，免去新手自己安裝各種包的麻煩蝙茶。
vue全家桶艺骂、Babel/TypeScript 轉(zhuǎn)譯、ESLint 集成隆夯、單元測試和 end-to-end 測試等钳恕。
網(wǎng)上資料比較多，我就不搬運(yùn)了蹄衷。

vue create my-project // 命令行的方式創(chuàng)建項(xiàng)目忧额，按照提示一步一步選擇，最后創(chuàng)建項(xiàng)目愧口。
# OR
vue ui // 可以在瀏覽器里面可視化的方式創(chuàng)建項(xiàng)目睦番，而且是中文版，適合新手使用耍属。

vite 的方式建立項(xiàng)目

官網(wǎng)： https://vue3js.cn/docs/zh/guide/installation.html#命令行工具-cli

vite 是一個(gè) web 開發(fā)構(gòu)建工具托嚣，由于其原生 ES 模塊導(dǎo)入方法，它允許快速提供代碼厚骗。通過在終端中運(yùn)行以下命令注益，可以使用 Vite 快速構(gòu)建 Vue 項(xiàng)目。
這是尤雨溪大大做的一個(gè)新的方式溯捆，想法非常新穎丑搔，可以多關(guān)注和嘗試。

$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev

或者

$ yarn create vite-app <project-name>
$ cd <project-name>
$ yarn
$ yarn dev

一個(gè)有趣的現(xiàn)象提揍，在vue的官網(wǎng)上面啤月，vite建立項(xiàng)目的方法，直接介紹了劳跃，但是cli建立項(xiàng)目的方法卻沒有直接介紹谎仲，而是加了一個(gè)不太明顯的連接，害得我都沒看到刨仑。
記得以前是在官網(wǎng)里直接介紹cli的創(chuàng)建項(xiàng)目的方式的郑诺。
那么是不是意味著vue打算主推vite呢夹姥？

vue全家桶的手動安裝方式

• Router

npm install vue-router
# or
yarn add vue-router

• Vuex

npm install vuex --save
# or
yarn add vuex

安裝第三方UI庫

• element Plus

npm install element-plus --save

• Ant Design Vue

npm install ant-design-vue --save
yarn add ant-design-vue

• Vant

npm i vant@next -S

其他略...

項(xiàng)目結(jié)構(gòu)

好了，各種折騰辙诞，終于把項(xiàng)目搭建起來了辙售，我們來看看是什么樣子

目錄結(jié)構(gòu).png

是不是很簡單清晰。

代碼入口 main.js

import { createApp } from 'vue' // 引入 createApp 函數(shù)
import Antd from 'ant-design-vue' // 引入U(xiǎn)I庫
import 'ant-design-vue/dist/antd.css' // 引入css
import App from './App.vue' // 引入我們寫的代碼
import router from './router' // 引入路由的實(shí)例
import store from './store' // 引入狀態(tài)管理的實(shí)例

createApp(App)
    .use(store) // 狀態(tài)管理
    .use(router) // 路由
    .use(Antd) // UI 庫
    .mount('#app') // 掛載

• import
  es6的一種加載方式飞涂，from 后面只能寫常量旦部，不能寫變量，也不支持字符串的運(yùn)算较店。

還是感覺cdn的方式更容易看清楚內(nèi)部原理士八。

頁面入口 App.vue

在vue里面都是組件(.vue)，只是我們從業(yè)務(wù)邏輯的角度來說梁呈，可以分為頁面和組件兩種婚度，當(dāng)然并不是嚴(yán)格的區(qū)分。

App.vue 可以視為頁面的入口

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view/>
</template>

<script>
export default {
  name: 'App', 
  setup() {
    console.log('你好官卡，世界陕见！')
  }
}
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
  a {
    font-weight: bold;
    color: #2c3e50;
    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

腳手架默認(rèn)為我們做了一個(gè)簡單的路由，設(shè)置了模板味抖、代碼评甜、css的結(jié)構(gòu)。

• template
  模板部分仔涩∪炭溃可以寫html和vue的方式。

• script
  js腳本部分熔脂，可以沒有佩研。支持js語法，寫vue需要的各種代碼霞揉。

• style
  css部分旬薯，也可以沒有。

頁面 About.vue

在這里實(shí)現(xiàn)一下上一篇里的功能适秩。

• 模板部分

<template>
  <div class="about">
    <h1>這是一個(gè)測試頁面</h1>
    {{value}}<br>
    <input type="button" value="測試" @click="click"/>

    <hr>
    vuex狀態(tài)演示<br>
    $store - count：{{$store.state.count}}<br>
    $store - myObject：{{$store.state.myObject}}<br>
    $store - myObject.time：{{$store.state.myObject.time}}<br>
    setup - count：{{count}}<br>
    setup - obj ：{{obj}}<br>
    setup - objTime ：{{objTime}}<br>
    <input type="button" @click="setCount" value="vuex的 計(jì)數(shù)"/><br>
    <input type="button" @click="setTime" value="vuex的 設(shè)置屬性"/><br>
    <hr>

    路由的演示<br>
    <div>
      <p>
        路由的簡單演示绊序，其實(shí)CND方式不太適合用路由，因?yàn)榻M件寫起來比較麻煩秽荞。<br>
        <!-- 使用 router-link 組件來導(dǎo)航. -->
        <!-- 通過傳入 `to` 屬性指定鏈接. -->
        <!-- <router-link> 默認(rèn)會被渲染成一個(gè) `<a>` 標(biāo)簽 -->
        <router-link to="/about/home">首頁</router-link>&nbsp;&nbsp;&nbsp;
        <router-link to="/about/product">產(chǎn)品</router-link>
      </p>
      <!-- 路由出口 -->
      <!-- 路由匹配到的組件將渲染在這里 -->
      路由入口<br>
      <router-view></router-view>
    </div>
  </div>
</template>

按照前一篇的例子骤公，實(shí)現(xiàn)相同的功能，做一下對比扬跋，可以發(fā)現(xiàn)基本沒有啥區(qū)別阶捆。

• js代碼部分

<script>
import { ref } from 'vue'
import { useStore } from 'vuex'

// vue3的 Composition API 的含義
const testManage = () => {
  const value = ref  ('你好，世界')
  const click = () => {
    value.value = '好的，收到' + new Date().valueOf()
  }
  
  return {
    value,
    click
  }
}

export default {
  name: 'Home',
  setup() {
    // 使用外面的定義洒试，分解setup內(nèi)部的代碼
    const { value, click } = testManage()
    
    const store = useStore()
    console.log('store', store)
    console.log('store.state', store.state)

    const setCount = () =>{
      store.commit('setCount')
    }

    const setTime = () =>{
      store.commit('setTime')
      // 測試直接修改
      // 加上 readonly 就不可修改了倍奢，
      // 但是代碼并不會報(bào)錯(cuò)
      setTimeout(() => {
        obj.time = '222'
        console.log('setTimeout-obj',obj)
      },500)
    }

    // 獲取state
    // const count1 = store.state.count 強(qiáng)烈建議不要直接訪問
    const count = store.getters.getCount
    const obj = store.getters.getMyObject
    const objTime = store.getters.getTime
    console.log('obj', obj)
    console.log('objTime', objTime)
    
    return {  // 返回給模板，否則模板訪問不到。
      value,
      click,
      setCount,
      setTime,
      count,
      obj,
      objTime
    }
  }
}

基本上也沒啥大區(qū)別。不重復(fù)介紹了诽凌。

組件

• home.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    home <br>
    $store - count：{{$store.state.count}}<br>
    $store - myObject：{{$store.state.myObject}}<br>
  </div>
</template>

<script>
export default {
  name: 'com-home',
  props: {
    msg: String
  }
}
</script>

基本上是一個(gè)空的組件，沒啥實(shí)際內(nèi)容跷坝，只是顯示一下狀態(tài)管理里的state的數(shù)據(jù)酵镜。只是一個(gè)簡單的演示碉碉。
另一個(gè)組件也是類似，就不貼代碼了淮韭。

狀態(tài)管理

import { readonly } from 'vue'
import { createStore } from 'vuex'

export default createStore({
  state: {
    count: 0,
    myObject: {
      time: '現(xiàn)在的時(shí)間'
    }
  },
  getters: {
    getCount: (state) => {
      return state.count
    },
    getMyObject: (state) => {
      return readonly(state.myObject)
    },
    getTime: (state) => {
      return state.myObject.time
    }
  },
  mutations: {
    setCount(state) {
      state.count++
    },
    setTime(state) {
      state.myObject.time = '現(xiàn)在時(shí)間：' + new Date()
    }
  },
  actions: {
  },
  modules: {
  }
})

對比一下cnd的方式垢粮，除了引用的部分之外，其他的也是基本一致靠粪。不再次介紹了蜡吧。

路由設(shè)置

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import('../views/About.vue'),
    children: [
      {
        path: 'home',
        name: 'About-home',
        component: () => import('../components/home.vue')
      },
      {
        path: 'product',
        name: 'About-product',
        component: () => import('../components/product.vue')
      }
    ]
  },
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router // 返回實(shí)例

腳手架默認(rèn)設(shè)置了一個(gè)簡單路由，這個(gè)就不改了占键，只是在about里面加一個(gè)子路由昔善，實(shí)現(xiàn)一個(gè)簡單的嵌套路由。

主要部分都介紹完畢畔乙。

小結(jié)

工程化開發(fā)的好處有很多君仆，比如可以就幫我們劃分好目錄結(jié)構(gòu)，文件位置牲距，這樣大家都按照這個(gè)規(guī)則來開發(fā)返咱，那么看別人的項(xiàng)目的時(shí)候就不用費(fèi)勁想別人會用什么開發(fā)方式了。

這只是做開發(fā)的第一步牍鞠，后面還有很多很多很多咖摹。。难述。