vue-cli4.x+部署vue2.x開發環境 引入iview


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框架的引入就完成了

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM