vue2.x+webpack快速搭建前端項(xiàng)目框架詳解
一、本文將分享如何快速搭起基于webpack+vue的前端項(xiàng)目框架,利用vue的自己的腳手架工具vue-cli搭建起基本的環(huán)境配置,再通過(guò)npm包管理工具引入相應(yīng)的依賴來(lái)完善項(xiàng)目的各種依賴框架。下面是具體實(shí)操。
二、基本命令操作。
1.在開發(fā)之前需要首先安裝node.js,直接百度搜索或者在其中文官網(wǎng)也可以下載http://nodejs.cn/download/
在裝完node之后npm包管理工具也自動(dòng)的安裝好,安裝完之后,在命令行輸入node -v或者npm -v,出現(xiàn)版本號(hào)說(shuō)明安裝成功。如下圖所示:
2.在使用npm之前,最好把鏡像換成淘寶的,長(zhǎng)久使用,跑一下命令:npm config set registry https://registry.npm.taobao.org,
替換成功后跑npm config get registry命令顯示淘寶鏡像路徑的話就代表替換成功。
3.第二步全局安裝vue-cli,在命令窗口輸入npm install -g vue-cli,然后跑vue -V出現(xiàn)版本號(hào)證明安裝成功。
4.開始生成項(xiàng)目,在本地硬盤找一個(gè)目錄存放代碼,然后打開命令行cd切換到相應(yīng)的路徑下,然后跑 vue init webpack Vue-Project(項(xiàng)目名稱)
vue init webpack Vue-Project(項(xiàng)目名稱)
5.輸入cd Vue-Project 然后安裝依賴npm install, 如果平常時(shí)開發(fā)就跑npm run dev(本地開發(fā)跑代碼),如果需要打包則跑npm run build。
6.項(xiàng)目默認(rèn)監(jiān)聽的是80端口,容易跟其他應(yīng)用引起端口沖突,所以在項(xiàng)目下打開config文件夾,打開index.js,把端口改為8888,這樣就避免沖突了,
7.最后重新跑指令npm run dev ,然后再地址欄輸入http://localhost:8888,就會(huì)出現(xiàn)相應(yīng)的頁(yè)面。
三、添加相應(yīng)的框架以及依賴
1.引入sass預(yù)編譯工具加快編碼速度,跑命令npm install node-sass --save-dev, npm install sass-loader --save-dev,如果node-sass比較難裝的話可以換成cnpm來(lái)下載依賴,具體可百度下做法。
操作:
在components目錄下新建一個(gè)header的目錄,新建兩個(gè)文件header.vue header.scss,然后引入到app.vue中使用,因?yàn)関ue講的是模塊化開發(fā),所以我喜歡把樣式跟組件放到一個(gè)文件夾里跟其他模塊區(qū)分,
App.vue:
header.scss:
這樣就證明sass 是安裝成功了。
2.引入axios接口請(qǐng)求框架,跑命令npm install axios --save-dev,npm install qs;
然后在src目錄下新建一個(gè)http.js文件進(jìn)行接口請(qǐng)求的相關(guān)配置,
import Vue from 'vue' import axios from 'axios' import Qs from 'qs'; var instance = axios.create({ //baseURL: 'https://some-domain.com/api/', timeout: timeout, responseType: 'json', // default, //headers: {'apikey': 'foobar'}, transformRequest:function(data,headers){ //為了避免qs格式化時(shí)對(duì)內(nèi)層對(duì)象的格式化先把內(nèi)層的對(duì)象轉(zhuǎn)為 //由于使用的form-data傳數(shù)據(jù)所以要格式化 if (typeof data == 'string') { headers.post['Content-Type'] = "application/json; charset=utf-8"; } else if(!(data instanceof FormData)){ headers.post['Content-Type'] = "application/x-www-form-urlencoded"; for(let key in data){ if(data[key]===undefined){ data[key]=null; } } data = Qs.stringify(data); } return data; } }); export default instance; Vue.prototype.$http=instance;
在使用請(qǐng)求接口的時(shí)候直接可以這樣用:(具體用法可以看下官方文檔)
this.$http.get(url).then((res)=>{ })
3.引入elementUI,跟人感覺elementUI是比較好用的vue組件UI,很多東西不用自己去寫,推薦使用,跑指令npm install element-ui --save,
然后在main.js中引入使用
import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import App from './App.vue' Vue.use(ElementUI)
當(dāng)然也可以按需引入,想用什么組件就引入什么組件,不要全部引入,這樣減少體積。
4.引入vuex
Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。
安裝:npm install vuex --save
具體使用這里不做詳細(xì)介紹,感興趣的可以看下中文官網(wǎng):https://vuex.vuejs.org/zh-cn/。
相關(guān)文章
Vue項(xiàng)目實(shí)現(xiàn)簡(jiǎn)單的權(quán)限控制管理功能
這篇文章主要介紹了Vue項(xiàng)目實(shí)現(xiàn)簡(jiǎn)單的權(quán)限控制功能,文中給大家介紹了兩種方式進(jìn)行權(quán)限限制,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2019-07-07Vue使用babel-polyfill兼容IE解決白屏及語(yǔ)法報(bào)錯(cuò)問(wèn)題
這篇文章主要介紹了Vue使用babel-polyfill兼容IE解決白屏及語(yǔ)法報(bào)錯(cuò)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03vue3如何優(yōu)雅的實(shí)現(xiàn)移動(dòng)端登錄注冊(cè)模塊
這篇文章主要給大家介紹了關(guān)于vue3如何優(yōu)雅的實(shí)現(xiàn)移動(dòng)端登錄注冊(cè)模塊的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03vue中靜態(tài)文件引用的注意事項(xiàng)及說(shuō)明
這篇文章主要介紹了vue中靜態(tài)文件引用的注意事項(xiàng)及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04vuejs router history 配置到iis的方法
今天小編就為大家分享一篇vuejs router history 配置到iis的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09vue+vuex+axios實(shí)現(xiàn)登錄、注冊(cè)頁(yè)權(quán)限攔截
下面小編就為大家分享一篇vue+vuex+axios實(shí)現(xiàn)登錄、注冊(cè)頁(yè)權(quán)限攔截,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03vue 使用async寫數(shù)字動(dòng)態(tài)加載效果案例
這篇文章主要介紹了vue 使用async寫數(shù)字動(dòng)態(tài)加載效果案例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07深度了解vue.js中hooks的相關(guān)知識(shí)
這篇文章主要介紹了深度了解vue.js中hooks的相關(guān)知識(shí),生命周期鉤子提供了一些 方法 ,因此你可以在組件生命周期的不同時(shí)刻精確地觸發(fā)某些操作。當(dāng)我們將組件實(shí)例化時(shí),組件會(huì)被創(chuàng)建,反之會(huì)被銷毀。,需要的朋友可以參考下2019-06-06vue如何實(shí)現(xiàn)跨頁(yè)面?zhèn)鬟f與接收數(shù)組并賦值
這篇文章主要介紹了vue如何實(shí)現(xiàn)跨頁(yè)面?zhèn)鬟f與接收數(shù)組并賦值,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04