這篇文章主要介紹了vue.js怎么創(chuàng)建項(xiàng)目,具有一定借鑒價(jià)值,需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
成都創(chuàng)新互聯(lián)公司自2013年起,先為廣河等服務(wù)建站,廣河等地企業(yè),進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為廣河企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。創(chuàng)建方法:1、安裝node環(huán)境;2、用“npm install --global vue-cli”命令全局安裝vue-cli;3、用“vue init webpack 項(xiàng)目名”命令創(chuàng)建項(xiàng)目;4、進(jìn)入項(xiàng)目,用“cnpm i”命令安裝依賴即可。
一、安裝node環(huán)境
1、下載地址為:https://nodejs.org/en/
2、檢查是否安裝成功:如果輸出版本號(hào),說明我們安裝node環(huán)境成功
3、為了提高我們的效率,可以使用淘寶的鏡像:http://npm.taobao.org/
輸入:npm install -g cnpm –registry=https://registry.npm.taobao.org,即可安裝npm鏡像,以后再用到npm的地方直接用cnpm來代替就好了。
檢查是否安裝成功:
二、創(chuàng)建項(xiàng)目,搭建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)目名
說明:
Vue build ==> 打包方式,回車即可;
Install vue-router ==> 是否要安裝 vue-router,項(xiàng)目中肯定要使用到 所以Y 回車;
Use ESLint to lint your code ==> 是否需要 js 語法檢測 目前我們不需要 所以 n 回車;
Set up unit tests ==> 是否安裝 單元測試工具 目前我們不需要 所以 n 回車;
Setup e2e tests with Nightwatch ==> 是否需要 端到端測試工具 目前我們不需要 所以 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:首頁入口文件,可以添加一些 meta 信息等
7、package.json:npm包配置文件,定義了項(xiàng)目的npm腳本,依賴包等信息
8、README.md:項(xiàng)目的說明文檔,markdown 格式
9、.xxxx文件:這些是一些配置文件,包括語法配置,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,查看頁面效果
注意:
一個(gè)組件下只能有一個(gè)并列的 div,以下寫法是錯(cuò)誤:
數(shù)據(jù)要寫在 return 里面,而不是像文檔那樣子寫,以下寫法錯(cuò)誤:
2、講講父子組件
1)在components目錄下新建sub文件夾,用于存放一下可以復(fù)用的子組件。比如新建一個(gè)Confirm.vue組件
3)在父組件中引入子組件
引入:import Confirm from '../sub/Confirm'
注冊:在<script></script>
標(biāo)簽內(nèi)的 name代碼塊后面加上 components: {Confirm}
使用:在<template></template>
內(nèi)加上<confirm></confirm>
完整代碼:
2)父子組件通信
子組件:
父組件:
3、使用路由搭建單頁應(yīng)用
1)按照以上方法,新建一個(gè)Second.vue組件
2)路由跳轉(zhuǎn):<router-link to="/second">去第二個(gè)頁面</router-link>
路由跳轉(zhuǎn)之后,注意觀察路徑變化:
可以看到,在html中解析成了a標(biāo)簽
這里只是簡單的介紹了一下路由的使用,更多詳細(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)打開瀏覽器的問題:當(dāng)我們輸入npm run dev,運(yùn)行項(xiàng)目,命令行提示我們運(yùn)行成功,但是瀏覽器也沒有自動(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,打開目錄同上
修改成功:
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享vue.js怎么創(chuàng)建項(xiàng)目內(nèi)容對(duì)大家有幫助,同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司,,關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,遇到問題就找創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司,,詳細(xì)的解決方法等著你來學(xué)習(xí)!
當(dāng)前名稱:vue.js怎么創(chuàng)建項(xiàng)目-創(chuàng)新互聯(lián)
本文URL:http://muchs.cn/article18/cdiogp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站維護(hù)、標(biāo)簽優(yōu)化、網(wǎng)頁設(shè)計(jì)公司、定制開發(fā)、外貿(mào)網(wǎng)站建設(shè)、軟件開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容