如何搭建一個(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)境成功
3蹬蚁、為了提高我們的效率打月,可以使用淘寶的鏡像:http://npm.taobao.org/
輸入:npm install -g cnpm –registry=https://registry.npm.taobao.org趁怔,即可安裝npm鏡像湿硝,以后再用到npm的地方直接用cnpm來(lái)代替就好了。
檢查是否安裝成功:
二润努、搭建vue項(xiàng)目環(huán)境
1关斜、全局安裝vue-cli
npm install --global vue-cli
2、進(jìn)入你的項(xiàng)目目錄任连,創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目: vue init webpack 項(xiàng)目名
說(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,安裝依賴
安裝成功后桶雀,項(xiàng)目文件夾中會(huì)多出一個(gè)目錄: node_modules
4矿酵、npm run dev,啟動(dòng)項(xiàng)目
項(xiàng)目啟動(dòng)成功:
三矗积、vue項(xiàng)目目錄講解
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里面配置路由路徑
c:template 寫 html蜡歹,script寫 js屋厘,style寫樣式
d:輸入ip: http://localhost:8010/#/first,查看頁(yè)面效果
注意:
一個(gè)組件下只能有一個(gè)并列的 div月而,以下寫法是錯(cuò)誤:
數(shù)據(jù)要寫在 return 里面汗洒,而不是像文檔那樣子寫,以下寫法錯(cuò)誤:
2父款、講講父子組件
1)在components目錄下新建sub文件夾溢谤,用于存放一下可以復(fù)用的子組件。比如新建一個(gè)Confirm.vue組件
3)在父組件中引入子組件
引入:import Confirm from '../sub/Confirm'
注冊(cè):在<script></script>
標(biāo)簽內(nèi)的 name代碼塊后面加上 components: {Confirm}
使用:在<template></template>
內(nèi)加上<confirm></confirm>
完整代碼:
2)父子組件通信
子組件:
父組件:
3憨攒、使用路由搭建單頁(yè)應(yīng)用
1)按照以上方法世杀,新建一個(gè)Second.vue組件
2)路由跳轉(zhuǎn):<router-link to="/second">去第二個(gè)頁(yè)面</router-link>
路由跳轉(zhuǎn)之后,注意觀察路徑變化:
可以看到肝集,在html中解析成了a標(biāo)簽
這里只是簡(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
安裝成功之后所刀,可在package.json中看到,多增加了2個(gè)模塊:
2)編寫less
五捞挥、補(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
2)module.exports配置中找到autoOpenBrowser垦沉,默認(rèn)設(shè)置的是false
3)將autoOpenBrowser改為true
4)Ctrl+C煌抒,然后我們重啟一下,就能自動(dòng)打開瀏覽器了
2乡话、為了避免端口沖突摧玫,也可以修改port,打開目錄同上
修改成功: