vue3.0,vue-cli4,vite 初次嘗試

 一、介紹

1。好久沒更新新的東西了，一直忙着做項目，最近看了一次直播，才發現，vue3.0發布很久了，且優勢很明顯，react 17 也出現，當然這里不講react。在vue上，不僅語法有變化，在打包編譯上也有一個新的工具vite,這個文章分為兩部分，一部風用vue-cli構建項目，一部分用vite構建一個。

 

2.為什么用vue3.0和vite呢。看一下官網不難發現:

• a.包大小和性能 ，比vue2快了兩倍，人在家中坐，KPI任務已完成;
• b.composition-api;
• c.tree-shaking 支持;
• d.typescript;
• e.custom renderer api;
• f.新的虛擬dom架構;
• g.vite真的強，Vite 將會使用 esbuild 構建項目依賴。Esbuild 使用 Go 編寫，並且比以 JavaScript 編寫的打包器預構建依賴快 10-100 倍。

 

二、 vue-cli 搭建vue3.0;

   1.有安裝vue-cli 的話，可以直接升級，或者卸載重裝

升級：npm update -g @vue/cli
卸載：npm uninstall vue-cli
安裝：npm install -g @vue/cli　

2.創建項目

vue create your_name

 

3.用空格回車，選擇你相應的組件依賴和框架

 這里選擇：Manually select features ，自定義。上面其它是 vue3.0和 2.0.

 

    大概選的上面那些。

 

 

   選擇3.x。

 

 

 路由history 模, y。

 

 

 這里用scss 。

 

 

 eslint 效驗規則。

 

 

 是否保存就開啟編譯。

 

 

 配置的路徑在哪里 這里選 package.json。

  

 

 

 這里問你是否將配置保存到本地；y。

 

 

 在給配置命名回車就創建項目了。

 最終項目結構如下：

 

 

項目下運行 npm run serve;啟動。

4.安裝我們用的依賴：element-ui。有意思的是。plues版本。

npm install element-plus --save

 

當然要用按需加載了：

npm install babel-plugin-import -D

 

然后，將 babel.config.js 修改為：

module.exports = {
  plugins: [
    [
      "import",
      {
        libraryName: 'element-plus',
        customStyleName: (name) => {
          name = name.slice(3)
          return `element-plus/packages/theme-chalk/src/${name}.scss`;
        },
      },
    ],
  ],
};

 

打開 main.js 改為如下

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 引入element
import { ElButton, ElButtonGroup } from 'element-plus'

const components = [ElButton, ElButtonGroup]

const app = createApp(App)
const ElementOption = { size: 'small', zIndex: 500 }

components.forEach(component => {
  // 注冊
  app.component(component.name, component)
})
// 設置全局默認樣式
app.config.globalProperties.$ELEMENT = ElementOption

app.use(store)
app.use(router)
app.mount('#app')

 

重啟，給頁面添加一個 element按鈕組件，成功。

 

三、 vite 搭建 vue3.0;

npm init @vitejs/app

 

 

  起名；

 

 

 選擇vue;

 

 

 選擇js;回車，創建成功。

 

 

 npm i;

npm run dev

 

按需引入 安裝element：

npm install element-plus --save
npm install vite-plugin-style-import -D

npm install node-sass -D
npm install sass-loader -D
npm install sass -D

 

 

更改main.js

import { createApp } from 'vue'
import App from './App.vue'

// 引入element
import { ElButton, ElButtonGroup } from 'element-plus'

const components = [ElButton, ElButtonGroup]

const app = createApp(App)
const ElementOption = { size: 'small', zIndex: 500 }

components.forEach(component => {
    // 注冊
    app.component(component.name, component)
})
// 設置全局默認樣式
app.config.globalProperties.$ELEMENT = ElementOption

app.mount('#app')

 

 

然后，將 vite.config.js 修改為：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import'

export default defineConfig({
    plugins: [
        vue(),
        styleImport({
            libs: [{
                libraryName: 'element-plus',
                esModule: true,
                ensureStyleFile: true,
                resolveStyle: (name) => {
                    name = name.slice(3)
                    return `element-plus/packages/theme-chalk/src/${name}.scss`;
                },
                resolveComponent: (name) => {
                    return `element-plus/lib/${name}`;
                },
            }]
        })
    ]
})

 

 

重啟，即可安裝成功！

 

四、下一遍詳細介紹組件的測試安裝使用。