Vue3（二）工程化開發方式做項目

這是開發中、大型項目的必備技能，網上資料也很多，這里只是一個簡單的綜合性的介紹。包括vue的全家桶、建立項目的幾種方式、UI庫的簡單使用等。 可以和上一篇的cnd方式做項目做一下對比。

執行 npm run serve ，然后就可以在瀏覽器里面訪問了，那么這是怎么做到的呢？ 這個就要歸功于node了。建立項目的時候，會自動創建一個node的服務，這樣我們就可以邊寫代碼，邊看運行效果了。 所以工程化開發，首先要安裝一個node。安裝方法網上已經有很多了，這里就不搬運了。 大家也不用擔心，不會用node怎么辦。這個是自動化的，記住幾個命令就行。

然后要掌握一個安裝包的技能，npm、cnpm、yarn都是包管理的工具。

因為需要從國外服務器下載需要的文件，所以安裝包的速度會很慢。如果不發布自己的包的話，那么就沒有必要用這個了。 安裝node后，一般會自動安裝npm。

是淘寶團隊做的一個國內鏡像，cnpm會從國內服務器下載需要的文件，所以速度就非�？炝�，除了不能發布包之外，其他功能和npm是一樣的。

• 安裝方式：

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

Yarn是facebook發布的一款取代npm的包管理工具。 yarn會緩存下載的文件，雖然第一次會有點慢，但是以后就會非�？炝�，而且還可以并行下載。所以推薦使用 yarn 做資源包的管理工具。

• 安裝方式：

npm install -g yarn

• 使用方式

yarn --version   // 查看版本
yarn init // 同npm init，執行輸入信息后，會生成package.json文件
yarn add [package] // 在當前的項目中添加一個依賴包，會自動更新到package.json和yarn.lock文件中
yarn upgrade  // 用于更新包到基于規范范圍的最新版本
yarn install //安裝package.json里所有包，并將包及它的所有依賴項保存進yarn.lock
yarn serve // 開發環境下運行vue3的項目
yarn publish   // 發布包
yarn remove [package] // 移除依賴包

也可以到官網下載安裝：https://yarn.bootcss.com/docs/install/

# 最新穩定版
yarn add vue@next
# OR
cnpm install vue@next

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

目前有兩種方式創建Vue3的項目：

• 傳統的腳手架（cli）的方式，完善、全面、穩定、成熟。
• 新的vite的方式，似乎還在完善中，可以嘗嘗鮮。

官網：https://cli.vuejs.org/zh/guide/ 其優點就是可以自動創建項目目錄結構和需要的各種文件，免去新手自己安裝各種包的麻煩。 vue全家桶、Babel/TypeScript 轉譯、ESLint 集成、單元測試和 end-to-end 測試等。 網上資料比較多，我就不搬運了。

vue create my-project // 命令行的方式創建項目，按照提示一步一步選擇，最后創建項目。
# OR
vue ui // 可以在瀏覽器里面可視化的方式創建項目，而且是中文版，適合新手使用。

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

vite 是一個 web 開發構建工具，由于其原生 ES 模塊導入方法，它允許快速提供代碼。通過在終端中運行以下命令，可以使用 Vite 快速構建 Vue 項目。 這是尤雨溪大大做的一個新的方式，想法非常新穎，可以多關注和嘗試。

$ npm init vite-app 
$ cd 
$ npm install
$ npm run dev

或者

$ yarn create vite-app 
$ cd 
$ yarn
$ yarn dev

一個有趣的現象，在vue的官網上面，vite建立項目的方法，直接介紹了，但是cli建立項目的方法卻沒有直接介紹，而是加了一個不太明顯的連接，害得我都沒看到。 記得以前是在官網里直接介紹cli的創建項目的方式的。 那么是不是意味著vue打算主推vite呢？

• Router

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

• Vuex

npm install vuex --save
# or
yarn add vuex

• 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

其他略...

好了，各種折騰，終于把項目搭建起來了，我們來看看是什么樣子

是不是很簡單清晰。

import { createApp } from 'vue' // 引入 createApp 函數
import Antd from 'ant-design-vue' // 引入UI庫
import 'ant-design-vue/dist/antd.css' // 引入css
import App from './App.vue' // 引入我們寫的代碼
import router from './router' // 引入路由的實例
import store from './store' // 引入狀態管理的實例

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

• import es6的一種加載方式，from 后面只能寫常量，不能寫變量，也不支持字符串的運算。

還是感覺cdn的方式更容易看清楚內部原理。

在vue里面都是組件(.vue)，只是我們從業務邏輯的角度來說，可以分為頁面和組件兩種，當然并不是嚴格的區分。

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

腳手架默認為我們做了一個簡單的路由，設置了模板、代碼、css的結構。

• template 模板部分�？梢詫慼tml和vue的方式。
• script js腳本部分，可以沒有。支持js語法，寫vue需要的各種代碼。
• style css部分，也可以沒有。

在這里實現一下上一篇里的功能。

• 模板部分

按照前一篇的例子，實現相同的功能，做一下對比，可以發現基本沒有啥區別。

• js代碼部分

基本上是一個空的組件，沒啥實際內容，只是顯示一下狀態管理里的state的數據。只是一個簡單的演示。 另一個組件也是類似，就不貼代碼了。

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

export default createStore({
  state: {
    count: 0,
    myObject: {
      time: '現在的時間'
    }
  },
  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 = '現在時間：' + new Date()
    }
  },
  actions: {
  },
  modules: {
  }
})

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

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 // 返回實例

腳手架默認設置了一個簡單路由，這個就不改了，只是在about里面加一個子路由，實現一個簡單的嵌套路由。

主要部分都介紹完畢。

工程化開發的好處有很多，比如可以就幫我們劃分好目錄結構，文件位置，這樣大家都按照這個規則來開發，那么看別人的項目的時候就不用費勁想別人會用什么開發方式了。

這只是做開發的第一步，后面還有很多很多很多。。。