Vue.js + Element.ui 從搭建環境到打包部署


一、搭建環境

由於新的node已經集成了npm,所以直接安裝node,前往node官網下載最新版本的node,根據自己的操作系統選擇相應的包,按照步驟一步步走就可以,這里不做過多介紹。

安裝好后可以打開命令行用  npm-v   node-v 查看是否安裝成功以及版本號

如果以前已經安裝過node  和 npm 最好升級到最新版本,命令行 npm install npm@x.xx.x

首先全局安裝vue-cli,打開CMD命令行,npm install -g vue-cli

接下來新建項目,運行 vue init webpack demo   這里的demo是你項目的名字,接下來會有一些初始化的設置,其中vue-router是路由,反正我都會選擇安裝,其他的可以回車跳過或者選擇no

 

 
 

---按照提示,cd到新建的項目下,運行npm install

---運行npm run dev

到這里,不出意外的話可以在瀏覽器里面看到Vue的初始化模板了,如果沒有可能是端口號被占用,這里就將配置文件config/index.js里面的端口號改掉就可以了

另外還要補充一下,最后的打包如果在本地起服務器運行打包后的文件是無法運行的,會報錯404,所以這里將assetsPublicPath里面的 "/"改成"./",截圖里面沒有改,懶得再截了,哈哈

 

 
 

我們先來看一下運行后的樣子

 

 
 

二、安裝Element

到這里我們就可以愉快的玩耍Vue了,但是我們之前說的是 Vue + Element 所以接下來我們葯繼續安裝ElementUI

cd到當前項目 運行 npm i element-ui -S

 

 
 

到這里我們已經安裝好了element,接下來就是在項目里面引用了,打開src目錄下的main.js

 

 
 

下面我們就可以愉快的使用element里面優雅的組件了,這個是element的網址http://element.eleme.io/#/zh-CN/component/form,也可以自行百度

我們用幾個小東西試一試

 

 
 

 

 
 

這里我們需要注意的是,每一個.vue文件里面只能有一個根目錄,就是說在這個class為hello的div下面不能有並列的元素,要不然會報錯,好了到這里就真的可以愉快的玩耍了

三、打包

在項目目錄下運行 npm run build  運行完成之后會在項目里面增加一個dist的目錄,直接把這個目錄丟給服務器就好了,dist目錄的名字可以自定義在配置文件里面

 

 
 

 

 
 

ok至此,就是本篇的全部內容,剩下的就去vue文檔一步步的學習吧,相信vue會給你帶來很大的樂趣。



作者:一本正經的胡說八道LV
鏈接:https://www.jianshu.com/p/998cf125e9fc
來源:簡書
簡書著作權歸作者所有,任何形式的轉載都請聯系作者獲得授權並注明出處。


免責聲明!

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



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