利用Vue-cli搭建Vue項目框架的教程詳解
首先安裝node.js
1.在新建的目錄中按住shift 鼠標右鍵,在此處打開命令窗口,版本保證在4.x以上
node -v
2.全局安裝vue腳手架
npm install -g vue-cli
同時可以使用vue和vue list 命令查看
3.初始化模板配置和項目名字
vue init webpack mycharts
mycharts是項目名
其中有許多需要選擇的選項,eslint適合團隊開發(fā),規(guī)范代碼之類的,個人開發(fā)我喜歡用stylus,所以這個選項我不會選n,其他Y
4.有提示就按enter,需要輸入就輸入具體參考這下面這張圖
5.進入sell項目目錄中
shift + 鼠標右鍵,進入命令窗口,下載依賴包
npm install
6.啟動項目
npm run dev
ico圖標制作 https://icomoon.io/app/#/select/font
剩下的就按需加載,安裝過程中,有時候,第一次安裝會報錯,重復安裝一次就好
安裝 babel-polyfill es6-promise
npm install babel-polyfill es6-promise --save-dev
安裝stylus stylus-loader
npm install stylus-loader stylus --save-dev
安裝vue-style-loader
npm install vue-style-loader --save-dev
安裝css-loader
npm install css-loader --save-dev
安裝vuex,全局變量的使用
npm install vuex --save-dev
安裝axios,前后臺通信框架
npm install axios --save-dev
安裝iviewui,第三方框架
npm install iview --save-dev
安裝echarts
npm install echarts --save-dev
安裝jquery
npm install jquery --save-dev
import $ from 'jquery'
從github上down項目vue項目下來的時候,在控制臺執(zhí)行
npm install
之后再運行項目即可
剩下的跟平時開發(fā)是一樣的了
到此這篇關于利用Vue-cli搭建Vue項目框架的教程詳解的文章就介紹到這了,更多相關Vue-cli搭建Vue項目框架內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
解決vue this.$forceUpdate() 處理頁面刷新問題(v-for循環(huán)值刷新等)
這篇文章主要介紹了解決vue this.$forceUpdate() 處理頁面刷新問題(v-for循環(huán)值刷新等),解決方法是使用this.$forceUpdate()強制刷新,文章給大家分享了代碼案例,需要的朋友參考下吧2018-07-07Electron-vue開發(fā)的客戶端支付收款工具的實現(xiàn)
這篇文章主要介紹了Electron-vue開發(fā)的客戶端支付收款工具的實現(xiàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-05-05基于Vue+ELement搭建動態(tài)樹與數(shù)據(jù)表格實現(xiàn)分頁模糊查詢實戰(zhàn)全過程
這篇文章主要給大家介紹了關于如何基于Vue+ELement搭建動態(tài)樹與數(shù)據(jù)表格實現(xiàn)分頁模糊查詢的相關資料,Vue Element UI提供了el-pagination組件來實現(xiàn)表格數(shù)據(jù)的分頁功能,需要的朋友可以參考下2023-10-10