超簡(jiǎn)單的Vue.js環(huán)境搭建教程
vue這個(gè)新的工具，確實(shí)能夠提高效率，vue入門的精髓：(前提都是在網(wǎng)絡(luò)連接上的情況下)
1.要使用vue來開發(fā)前端框架，首先要有環(huán)境，這個(gè)環(huán)境要借助于node，所以要先安裝node，借助于node里面的npm來安裝需要的依賴等等。
這里有一個(gè)小技巧：如果在cmd中直接使用npm來安裝的一些工具的話會(huì)比較慢，所以我們使用淘寶的npm鏡像：
輸入npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安裝npm鏡像，以后再用到npm的地方直接用cnpm來代替就好了。
安裝完npm鏡像后，開始安裝全局vue-cli腳手架，之所以要用vue-cli，是應(yīng)為這個(gè)工具能幫我們搭建好我們需要的模板框架，比較簡(jiǎn)單。方法：cnpm install -g vue-cli 回車，驗(yàn)證是否安裝成功，在命令行中輸入vue，出來vue的信息說明---安裝成功
2.安裝完腳手架以后開始，開始創(chuàng)建一個(gè)新項(xiàng)目：命令 vue init webpack vue_project(最后這個(gè)是我創(chuàng)建的項(xiàng)目文件夾的名字)
過程中會(huì)出現(xiàn)
3 cd vue_project
安裝依賴，生成node_modules目錄（安裝依賴的代碼庫）
npm install=>會(huì)生成這個(gè)文件夾node_modules（注：當(dāng)我們把用vue-cli腳手架搭建成的vue項(xiàng)目復(fù)制到其他地方時(shí)，要把node_modules目錄刪除，不然在其他地方無法執(zhí)行cnpm run dev，這其中設(shè)計(jì)到路徑的問題。刪除之后要重新cnpm install）
npm run dev 準(zhǔn)備工作做好以后，測(cè)試一下項(xiàng)目里面默認(rèn)的app.vue模塊能否跑起來，這是需要先安裝一下服務(wù)器環(huán)境，在命令行中或者輸入運(yùn)行”npm run dev”的時(shí)候執(zhí)行的是build/dev-server.js文件，運(yùn)行”npm run build”的時(shí)候執(zhí)行（用來執(zhí)行發(fā)布的）的是build/build.js文件，我們可以從這兩個(gè)文件開始進(jìn)行代碼閱讀分析。
Devdeendencies是表示我們編譯過程的一些依賴。
Readme文件：項(xiàng)目的描述文件
每個(gè)組件分為三個(gè)部分：模板、邏輯、樣式
cnpm run dev 回車即可 ，就會(huì)打開瀏覽器http://localhost:8080
應(yīng)用場(chǎng)景：
針對(duì)具有復(fù)雜交互邏輯的前端應(yīng)用；
它可以提供基礎(chǔ)的架構(gòu)抽象；
可以通過AJAX數(shù)據(jù)持久化，保證前端用戶體驗(yàn)。
好處：
當(dāng)前端和數(shù)據(jù)做一些操作的時(shí)候，可以通過AJAX請(qǐng)求對(duì)后端做數(shù)據(jù)持久化，不需要刷新整個(gè)頁面，只需要改動(dòng)DOM里需要改動(dòng)的那部分?jǐn)?shù)據(jù)。特別是移動(dòng)端應(yīng)用場(chǎng)景，刷新頁面太昂貴，會(huì)重新加載很多資源，雖然有些會(huì)被緩存，但是頁面的DOM,JS,CSS都會(huì)被頁面重新解析一遍，因此移動(dòng)端頁面通常會(huì)做出SPA單頁應(yīng)用。
Vue.js的特點(diǎn)：MVVM框架、數(shù)據(jù)驅(qū)動(dòng)、組件化、輕量、簡(jiǎn)潔、高效、快速、模塊友好。
本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。
關(guān)于vue.js組件的教程，請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
今天小編就為大家分享一篇解決Vue在Tomcat8下部署頁面不加載的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue監(jiān)聽頁面變化的實(shí)現(xiàn)方法小結(jié)
在Vue.js應(yīng)用開發(fā)過程中,監(jiān)聽頁面變化是一個(gè)非常常見的需求,無論是為了響應(yīng)用戶交互、優(yōu)化性能,還是實(shí)現(xiàn)復(fù)雜的業(yè)務(wù)邏輯,監(jiān)聽頁面變化的能力都是不可或缺的,本文將詳細(xì)介紹如何在Vue項(xiàng)目中實(shí)現(xiàn)頁面變化監(jiān)聽,需要的朋友可以參考下2024-10-10
vant組件中 dialog的確認(rèn)按鈕的回調(diào)事件操作
這篇文章主要介紹了vant組件中 dialog的確認(rèn)按鈕的回調(diào)事件操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了如何讓vue長(zhǎng)列表快速加載，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
Vue3之列表動(dòng)畫和狀態(tài)動(dòng)畫示例詳解
這篇文章主要為大家介紹了Vue3之列表動(dòng)畫和狀態(tài)動(dòng)畫示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
Vue.js中用webpack合并打包多個(gè)組件并實(shí)現(xiàn)按需加載
對(duì)于現(xiàn)在前端插件的頻繁更新，我也是無力吐槽，但是既然入了前端的坑就得認(rèn)嘛，所以多多少少要對(duì)組件化有點(diǎn)了解，下面這篇文章主要給大家介紹了在Vue.js中用webpack合并打包多個(gè)組件并實(shí)現(xiàn)按需加載的相關(guān)資料，需要的朋友可以參考下。2017-02-02
這篇文章主要介紹了Vue.directive()的用法和實(shí)例 ,需要的朋友可以參考下2018-03-03
vue?中使用?this?更新數(shù)據(jù)的一次問題記錄
這篇文章主要介紹了vue?中使用?this?更新數(shù)據(jù)的一次大坑?,我在 vue 實(shí)例中聲明了一個(gè)數(shù)組屬性如?books: []，在異步請(qǐng)求的回調(diào)函數(shù)中使用?this.books = res.data.data;?進(jìn)行數(shù)據(jù)更新，感興趣的朋友跟隨小編一起看看吧2022-11-11
前端vue+element使用SM4國密加密解密的詳細(xì)實(shí)例
國密即國家密碼局認(rèn)定的國產(chǎn)密碼算法,主要有SM1,SM2,SM3,SM4,下面這篇文章主要給大家介紹了關(guān)于前端vue+element使用SM4國密加密解密的相關(guān)資料,需要的朋友可以參考下2023-03-03
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)記事本功能，記事本可以進(jìn)行添加刪除事件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06