1.首先當然是安裝nodejs,因為這邊我已經裝過了 所以就不再安裝了 直接下一步下一步完成安裝。
2.get~安裝完成后先測試一下是否在本地已經安裝成功了,能出現下面這兩個提示就說明安裝已經成功了
命令:npm -v node-v
3.接下來安裝vuecli腳手架,因為我們實地在用的過程中不可能一直停留在低版本的腳手架版本,所以我們這邊直接安裝最新版本的vuecli 4.x 之后再到配置里選擇制定的vue版本項目創建。
vuecli 3.x~4.x 的安裝命令為 npm install -g @vue/cli
安裝中...
安裝成功~
測試一下是否安裝成功
ok 完成安裝
4.下一步開始創建vue項目
vue create 你的項目名字(不能有大寫和使用駝峰來命名)
會出現下圖
這邊可供選擇的有vue2.X的項目和vue3.x的項目,第三項是基於3.0做自動配置 我們先跳過 直接選擇2.0的項目建立起來 選擇 vue2
安裝中.... 耐心等待項目安裝完成
出現下圖 說明已經安裝成功
然后先不用着急運行 先cd到項目文件夾下 cd 你的項目名
將路徑復制下來
復制到文件路徑中打開
這樣就到了文件目錄中
下一步就是把項目拉倒我們的vscode中
這是項目結構
選在集成終端中打開cmd 運行 npm install --save 安裝一下包依賴
安裝完成
最后一步運行項目 npm run serve
ok 啟動成功了 打開頁面
接下來安裝 i-view ui https://www.iviewui.com/docs/introduce 官方文檔鏈接
官方文檔已經明確指出 使用npm的方式來安裝viewui ok 照着做就行
在命令行輸入 npm install view-design --save
安裝完成
安裝完成后我們需要到項目目錄下的 main.js 文件里全局引入
依照官方文檔 我們需要引入主js文件和css樣式文件
import ViewUI from 'view-design'
import 'view-design/dist/styles/iview.css'
在引用到vue實例中
Vue.use(ViewUI)
ok 這樣就完成安裝了 下一步引入一個viewui的組件到 helloworld 頁面里試試看~~
保存 到頁面里看一下效果
ok 沒問題 這樣子搭建vue2.x項目和iviewui框架的引入就完成了