如何使用webpack和Vue CLI 3在項目中實現Vuesax

vuesax

Vuesax 是一個基於vuejs的組件框架，它是一個從頭開始設計以逐步採用的框架。 該框架的重點是促進應用程序的開發，在不刪除必要功能的情況下改進應用程序的設計。 我們希望所有組件在顏色，形狀和設計上都是獨立的，我們喜歡所有前端的自由，但不會失去創作和製作的速度。 Instalación 本安裝教程適用於使用vuesax：

• webpack
• Vue CLI 3
• NPM
• Node.js

如果您要通過CDN在項目中實現vuesax，那麼只需要在vuejs之後輸入腳本就沒什麼可解釋的了。

創建項目

首先，我們需要一個文件夾來託管我們的優秀項目，但由於我們將使用Vue CLI，我們不需要創建它，我們在創建項目時自動創建它 因此，我們將使用Vue CLI 3啟動一個項目，當然，如果我們在計算機上全局安裝它，如果沒有，請執行此腳本

npm install -g @vue/cli
复制代码

已經全局安裝，我們站在我們所有項目所在的文件夾中（我們不創建項目文件夾Vue CLI為我們做了） 我們執行腳本以啟動Vue CLI項目

vue創建我的項目

準備好我們的文件夾包含vuejs項目的所有必要文件 然後我們輸入在這種情況下稱為我的oriject的文件夾（在vue create之後是項目的名稱） 在項目中啟動我們的測試服務器並看到一切順利，我們執行

npm run serve
复制代码

一段時間後，我們的Vue CLI將提升我們的服務器，幾乎總是服務器路徑 localhost:8080 準備好我們的活動服務器與vuejs和項目所需的一切 vuesax

安裝 Vuesax

既然我們已準備好所有必要的項目（Vue CLI），我們將為該命令添加Vuesax

npm install vuesax
复制代码

我們必須等待在我們的項目中安裝依賴項 現在完成安裝後，只有實現將缺少在應用程序中的任何位置使用 我們打開我們的主文件，在這種情況下

// my-project/src/main.js
import Vue from 'vue'
import Vuesax from 'vuesax' //import dependency
import 'vuesax/dist/vuesax.css' // import css style
Vue.use(Vuesax) // implement Vuesax throughout the application
复制代码

該文件應該是這樣的

import Vue from 'vue'
import App from './App.vue'
import Vuesax from 'vuesax'
import 'vuesax/dist/vuesax.css'
Vue.use(Vuesax)
Vue.config.productionTip = false
new Vue({
  render: h => h(App)
}).$mount('#app')
// 我們的應用程序中已經有了所有組件和功能的vuesax
复制代码

添加組件

我們已經在整個應用程序中使用了vuesax，但現在我們在模板中添加了一個組件。 我們將添加一個按鈕並替換文件my-project / src / components / HelloWorld.vue中的鏈接 該文件應該只清楚模板的一部分

<template>
  <div class="hello">
   <vs-button vs-type="filled">Primary</vs-button>
  </div>
</template>
复制代码

實現之後，讓我們回顧一下vs-button組件的外觀 準備我們的Vuesax應用程序現在正在實施 非常感謝您花時間閱讀有關Vuesax的文章

鏈接

• Vuesax
• Github Vueasx
• Vue CLI
• Webpack