利用Vue-cli搭建Vue項(xiàng)目框架的教程詳解
首先安裝node.js
1.在新建的目錄中按住shift 鼠標(biāo)右鍵,在此處打開命令窗口,版本保證在4.x以上
node -v
2.全局安裝vue腳手架
npm install -g vue-cli
同時(shí)可以使用vue和vue list 命令查看
3.初始化模板配置和項(xiàng)目名字
vue init webpack mycharts
mycharts是項(xiàng)目名
其中有許多需要選擇的選項(xiàng),eslint適合團(tuán)隊(duì)開發(fā),規(guī)范代碼之類的,個(gè)人開發(fā)我喜歡用stylus,所以這個(gè)選項(xiàng)我不會(huì)選n,其他Y
4.有提示就按enter,需要輸入就輸入具體參考這下面這張圖
5.進(jìn)入sell項(xiàng)目目錄中
shift + 鼠標(biāo)右鍵,進(jìn)入命令窗口,下載依賴包
npm install
6.啟動(dòng)項(xiàng)目
npm run dev
ico圖標(biāo)制作 https://icomoon.io/app/#/select/font
剩下的就按需加載,安裝過(guò)程中,有時(shí)候,第一次安裝會(huì)報(bào)錯(cuò),重復(fù)安裝一次就好
安裝 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,前后臺(tái)通信框架
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項(xiàng)目vue項(xiàng)目下來(lái)的時(shí)候,在控制臺(tái)執(zhí)行
npm install
之后再運(yùn)行項(xiàng)目即可
剩下的跟平時(shí)開發(fā)是一樣的了
到此這篇關(guān)于利用Vue-cli搭建Vue項(xiàng)目框架的教程詳解的文章就介紹到這了,更多相關(guān)Vue-cli搭建Vue項(xiàng)目框架內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vuejs中監(jiān)聽窗口關(guān)閉和窗口刷新事件的方法
今天小編就為大家分享一篇vuejs中監(jiān)聽窗口關(guān)閉和窗口刷新事件的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09vue再次進(jìn)入頁(yè)面不會(huì)再次調(diào)用接口請(qǐng)求問(wèn)題
這篇文章主要介紹了vue再次進(jìn)入頁(yè)面不會(huì)再次調(diào)用接口請(qǐng)求問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08解決vue this.$forceUpdate() 處理頁(yè)面刷新問(wèn)題(v-for循環(huán)值刷新等)
這篇文章主要介紹了解決vue this.$forceUpdate() 處理頁(yè)面刷新問(wèn)題(v-for循環(huán)值刷新等),解決方法是使用this.$forceUpdate()強(qiáng)制刷新,文章給大家分享了代碼案例,需要的朋友參考下吧2018-07-07Electron-vue開發(fā)的客戶端支付收款工具的實(shí)現(xiàn)
這篇文章主要介紹了Electron-vue開發(fā)的客戶端支付收款工具的實(shí)現(xiàn),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05基于Vue+ELement搭建動(dòng)態(tài)樹與數(shù)據(jù)表格實(shí)現(xiàn)分頁(yè)模糊查詢實(shí)戰(zhàn)全過(guò)程
這篇文章主要給大家介紹了關(guān)于如何基于Vue+ELement搭建動(dòng)態(tài)樹與數(shù)據(jù)表格實(shí)現(xiàn)分頁(yè)模糊查詢的相關(guān)資料,Vue Element UI提供了el-pagination組件來(lái)實(shí)現(xiàn)表格數(shù)據(jù)的分頁(yè)功能,需要的朋友可以參考下2023-10-10Vue關(guān)于自定義事件的$event傳參問(wèn)題
這篇文章主要介紹了Vue關(guān)于自定義事件的$event傳參問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10Vue實(shí)現(xiàn)動(dòng)態(tài)路由的示例詳解
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)動(dòng)態(tài)路由的相關(guān)知識(shí),主要涉及到兩個(gè)方面:一是路由的動(dòng)態(tài)添加,二是基于路由的參數(shù)變化來(lái)動(dòng)態(tài)渲染組件,下面就跟隨小編一起深入學(xué)習(xí)一下動(dòng)態(tài)路由的實(shí)現(xiàn)吧2024-02-02淺析vue-router實(shí)現(xiàn)原理及兩種模式
這篇文章主要介紹了vue-router實(shí)現(xiàn)原理及兩種模式分析,給大家介紹了vue-router hash模式與history模式不同模式下處理邏輯,需要的朋友可以參考下2020-02-02