一聚教程網︰一個值得你收藏的教程網站

最新下載

秒速赛车-秒速赛车官方网站「秒速赛车开奖查询」-「平安彩票网」

時間︰2019-04-11 17:10:06 編輯︰豬哥 來源︰轉載

1︰安裝node

前端開發框架和環境都是需要 Node.js ,先安裝node.js開發環境,vue的運行是要依賴于node的npm的管理工具來實現,下載,安裝完成之後,打開cmd開始輸入命令。(我用的是win10系統,所以需要管理員權限,右鍵點擊以管理員身份運行cmd),不然會出現很多報錯。

vue項目創建並引入餓了麼elementUI組件的步驟

2︰查看node的版本號

輸入命令︰node -v;

vue項目創建並引入餓了麼elementUI組件的步驟

3︰安裝淘寶npm鏡像

由于npm是國外的,使用起來比較慢,我們這里使用淘寶的cnpm鏡像來安裝vue. 淘寶的cnpm命令管理工具可以代替默認的npm管理工具。

輸入命令︰npm install -g cnpm --registry=https://registry.npm.taobao.org

4︰安裝全局vue-cli腳手架

淘寶鏡像安裝成功之後,我們就可以全局vue-cli腳手架,輸入命令︰cnpm install --global vue-cli 回車;驗證是否安裝成功,在命令輸入vue,出來vue的信息,及說明安裝成功;因為本人翻牆,習慣用npm所以後面的命令依然用npm運行;

輸入命令︰npm install --global vue-cli

5︰開始進入主題,初始化一個vue項目

輸入命令,itemname是你的項目名稱

輸入命令︰vue init webpack itemname

其中vue build 一般選擇Runtime-only,如果需要編譯則選擇Runtime + Compiler,但會影響性能;

ESlint是檢查代碼,一般選擇安裝,選Standard;

Pick a test runner 選擇Jest

vue項目創建並引入餓了麼elementUI組件的步驟

如果出現以下截圖,說明已經成功了,輸入命令,運行項目

vue項目創建並引入餓了麼elementUI組件的步驟

6︰安裝 elementUI

輸入命令︰npm i element-ui -S
這里解釋以下 -S指生產環境,-D指開發環境

vue項目創建並引入餓了麼elementUI組件的步驟

element-ui安裝在了這里

vue項目創建並引入餓了麼elementUI組件的步驟

7:測試一下ElementUI是否可用;

在項目的src/components目錄下新建test.vue,具體代碼如下︰



<script>
export default{
 name:"test",
 data(){
  return{
   data:"這是測試數據",
  }
 }
}
</script>

然後在路由中引入test.vue,路由位置︰src/router/index.js,代碼如下︰

vue項目創建並引入餓了麼elementUI組件的步驟

然後在瀏覽器地址欄輸入http://localhost:8080/#/test,(前提已經運行了npm run dev)如果看到一下界面說明已經成功了

vue項目創建並引入餓了麼elementUI組件的步驟

文章評論

熱門欄目