VUE 搭建過(guò)程

如何搭建一個(gè)vue項(xiàng)目(完整步驟)

參考資料
https://blog.csdn.net/namechenfl/article/details/81149161
一、安裝node環(huán)境

1、下載地址為:https://nodejs.org/en/

2且警、檢查是否安裝成功:如果輸出版本號(hào),說(shuō)明我們安裝node環(huán)境成功

image

3蹬蚁、為了提高我們的效率打月,可以使用淘寶的鏡像:http://npm.taobao.org/

輸入:npm install -g cnpm –registry=https://registry.npm.taobao.org趁怔,即可安裝npm鏡像湿硝,以后再用到npm的地方直接用cnpm來(lái)代替就好了。

image

檢查是否安裝成功:

image

二润努、搭建vue項(xiàng)目環(huán)境

1关斜、全局安裝vue-cli

npm install --global vue-cli

image

2、進(jìn)入你的項(xiàng)目目錄任连,創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目: vue init webpack 項(xiàng)目名

image

說(shuō)明:

Vue build ==> 打包方式蚤吹,回車即可;

Install vue-router ==> 是否要安裝 vue-router,項(xiàng)目中肯定要使用到 所以Y 回車裁着;

Use ESLint to lint your code ==> 是否需要 js 語(yǔ)法檢測(cè) 目前我們不需要 所以 n 回車繁涂;

Set up unit tests ==> 是否安裝 單元測(cè)試工具 目前我們不需要 所以 n 回車;

Setup e2e tests with Nightwatch ==> 是否需要 端到端測(cè)試工具 目前我們不需要 所以 n 回車二驰;

3扔罪、進(jìn)入項(xiàng)目:cd vue-demo,安裝依賴

image

安裝成功后桶雀,項(xiàng)目文件夾中會(huì)多出一個(gè)目錄: node_modules

image

4矿酵、npm run dev,啟動(dòng)項(xiàng)目

項(xiàng)目啟動(dòng)成功:

image

三矗积、vue項(xiàng)目目錄講解

image

1全肮、build:構(gòu)建腳本目錄

1)build.js ==> 生產(chǎn)環(huán)境構(gòu)建腳本;

2)check-versions.js ==> 檢查npm棘捣,node.js版本辜腺;

3)utils.js ==> 構(gòu)建相關(guān)工具方法;

4)vue-loader.conf.js ==> 配置了css加載器以及編譯css之后自動(dòng)添加前綴乍恐;

5)webpack.base.conf.js ==> webpack基本配置评疗;

6)webpack.dev.conf.js ==> webpack開發(fā)環(huán)境配置;

7)webpack.prod.conf.js ==> webpack生產(chǎn)環(huán)境配置茵烈;

2百匆、config:項(xiàng)目配置

1)dev.env.js ==> 開發(fā)環(huán)境變量;

2)index.js ==> 項(xiàng)目配置文件呜投;

3)prod.env.js ==> 生產(chǎn)環(huán)境變量加匈;

3、node_modules:npm 加載的項(xiàng)目依賴模塊

4仑荐、src:這里是我們要開發(fā)的目錄矩动,基本上要做的事情都在這個(gè)目錄里。里面包含了幾個(gè)目錄及文件:

1)assets:資源目錄释漆,放置一些圖片或者公共js、公共css篮迎。這里的資源會(huì)被webpack構(gòu)建男图;

2)components:組件目錄,我們寫的組件就放在這個(gè)目錄里面甜橱;

3)router:前端路由逊笆,我們需要配置的路由路徑寫在index.js里面;

4)App.vue:根組件岂傲;

5)main.js:入口js文件难裆;

5、static:靜態(tài)資源目錄,如圖片乃戈、字體等褂痰。不會(huì)被webpack構(gòu)建

6、index.html:首頁(yè)入口文件症虑,可以添加一些 meta 信息等

7缩歪、package.json:npm包配置文件,定義了項(xiàng)目的npm腳本谍憔,依賴包等信息

8匪蝙、README.md:項(xiàng)目的說(shuō)明文檔,markdown 格式

9习贫、.xxxx文件:這些是一些配置文件逛球,包括語(yǔ)法配置,git配置等

四苫昌、開始我們的第一個(gè)vue項(xiàng)目

1颤绕、在components目錄下新建一個(gè)views目錄,里面寫我們的vue組件

1)開始我們的第一個(gè)組件:

a:在views目錄下新建First.vue

b:在router目錄下的index.js里面配置路由路徑

image

c:template 寫 html蜡歹,script寫 js屋厘,style寫樣式

image

d:輸入ip: http://localhost:8010/#/first,查看頁(yè)面效果

image

注意:

一個(gè)組件下只能有一個(gè)并列的 div月而,以下寫法是錯(cuò)誤:

image

數(shù)據(jù)要寫在 return 里面汗洒,而不是像文檔那樣子寫,以下寫法錯(cuò)誤:

image

2父款、講講父子組件

1)在components目錄下新建sub文件夾溢谤,用于存放一下可以復(fù)用的子組件。比如新建一個(gè)Confirm.vue組件

image

3)在父組件中引入子組件

引入:import Confirm from '../sub/Confirm'

注冊(cè):在<script></script>標(biāo)簽內(nèi)的 name代碼塊后面加上 components: {Confirm}

使用:在<template></template>內(nèi)加上<confirm></confirm>

完整代碼:

image

2)父子組件通信

子組件:

image

父組件:

image

3憨攒、使用路由搭建單頁(yè)應(yīng)用

1)按照以上方法世杀,新建一個(gè)Second.vue組件

2)路由跳轉(zhuǎn):<router-link to="/second">去第二個(gè)頁(yè)面</router-link>

image
image

路由跳轉(zhuǎn)之后,注意觀察路徑變化:

image

可以看到肝集,在html中解析成了a標(biāo)簽

image

這里只是簡(jiǎn)單的介紹了一下路由的使用瞻坝,更多詳細(xì)信息,請(qǐng)前往官網(wǎng)學(xué)習(xí):https://router.vuejs.org/zh-cn/

4杏瞻、如何用less寫樣式

1)安裝less依賴:npm install less less-loader --save

image

安裝成功之后所刀,可在package.json中看到,多增加了2個(gè)模塊:

image

2)編寫less

image

五捞挥、補(bǔ)充

1浮创、解決vue不能自動(dòng)打開瀏覽器的問(wèn)題:當(dāng)我們輸入npm run dev,運(yùn)行項(xiàng)目砌函,命令行提示我們運(yùn)行成功斩披,但是瀏覽器也沒(méi)有自動(dòng)打開溜族,只能自己手動(dòng)輸入。

解決:

1)打開config ==> index.js

image

2)module.exports配置中找到autoOpenBrowser垦沉,默認(rèn)設(shè)置的是false

image

3)將autoOpenBrowser改為true

image

4)Ctrl+C煌抒,然后我們重啟一下,就能自動(dòng)打開瀏覽器了

image

2乡话、為了避免端口沖突摧玫,也可以修改port,打開目錄同上

image

修改成功:

image
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末绑青,一起剝皮案震驚了整個(gè)濱河市诬像,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌闸婴,老刑警劉巖坏挠,帶你破解...
    沈念sama閱讀 216,470評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異邪乍,居然都是意外死亡降狠,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,393評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門庇楞,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)榜配,“玉大人,你說(shuō)我怎么就攤上這事吕晌〉叭欤” “怎么了?”我有些...
    開封第一講書人閱讀 162,577評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵睛驳,是天一觀的道長(zhǎng)烙心。 經(jīng)常有香客問(wèn)我,道長(zhǎng)乏沸,這世上最難降的妖魔是什么淫茵? 我笑而不...
    開封第一講書人閱讀 58,176評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮蹬跃,結(jié)果婚禮上匙瘪,老公的妹妹穿的比我還像新娘。我一直安慰自己蝶缀,他們只是感情好辆苔,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,189評(píng)論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著扼劈,像睡著了一般。 火紅的嫁衣襯著肌膚如雪菲驴。 梳的紋絲不亂的頭發(fā)上荐吵,一...
    開封第一講書人閱讀 51,155評(píng)論 1 299
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼先煎。 笑死贼涩,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的薯蝎。 我是一名探鬼主播遥倦,決...
    沈念sama閱讀 40,041評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼占锯!你這毒婦竟也來(lái)了袒哥?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,903評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤消略,失蹤者是張志新(化名)和其女友劉穎堡称,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體艺演,經(jīng)...
    沈念sama閱讀 45,319評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡却紧,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,539評(píng)論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了胎撤。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片晓殊。...
    茶點(diǎn)故事閱讀 39,703評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖伤提,靈堂內(nèi)的尸體忽然破棺而出巫俺,到底是詐尸還是另有隱情,我是刑警寧澤飘弧,帶...
    沈念sama閱讀 35,417評(píng)論 5 343
  • 正文 年R本政府宣布识藤,位于F島的核電站,受9級(jí)特大地震影響次伶,放射性物質(zhì)發(fā)生泄漏痴昧。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,013評(píng)論 3 325
  • 文/蒙蒙 一冠王、第九天 我趴在偏房一處隱蔽的房頂上張望赶撰。 院中可真熱鬧,春花似錦柱彻、人聲如沸豪娜。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,664評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)瘤载。三九已至,卻和暖如春卖擅,著一層夾襖步出監(jiān)牢的瞬間鸣奔,已是汗流浹背墨技。 一陣腳步聲響...
    開封第一講書人閱讀 32,818評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留挎狸,地道東北人扣汪。 一個(gè)月前我還...
    沈念sama閱讀 47,711評(píng)論 2 368
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像锨匆,于是被迫代替她去往敵國(guó)和親崭别。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,601評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容