快捷導(dǎo)航

Vue.js開發(fā)環(huán)境搭建

更新時(shí)間：2016年11月10日 10:45:55 作者：fendo

Vue.js（讀音 /vjuː/, 類似于 view）是一套構(gòu)建用戶界面的漸進(jìn)式框架。本文給大家介紹Vue.js開發(fā)環(huán)境搭建的詳解講解，感興趣的朋友一起看看吧

一、簡(jiǎn)介

Vue.js 是什么

Vue.js（讀音 /vjuː/, 類似于 view）是一套構(gòu)建用戶界面的 漸進(jìn)式框架。與其他重量級(jí)框架不同的是，Vue 采用自底向上增量開發(fā)的設(shè)計(jì)。Vue 的核心庫只關(guān)注視圖層，并且非常容易學(xué)習(xí)，非常容易與其它庫或已有項(xiàng)目整合。另一方面，Vue 完全有能力驅(qū)動(dòng)采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)的復(fù)雜單頁應(yīng)用。

Vue.js 的目標(biāo)是通過盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。

Vue.js是一個(gè)MVVM模式的框架，如果讀者有angular經(jīng)驗(yàn)，一定能夠很快入門Vue的

vue.js的特點(diǎn):

易用：已經(jīng)會(huì)了HTML,CSS,JavaScript？即刻閱讀指南即可開始構(gòu)建應(yīng)用！

靈活：簡(jiǎn)單小巧的核心，漸進(jìn)式技術(shù)棧，足以應(yīng)付任何規(guī)模的應(yīng)用。

高效： 16kb min+gzip 的運(yùn)行大小,超快虛擬 DOM ,最省心的優(yōu)化

二、環(huán)境搭建

vue推薦開發(fā)環(huán)境:

Node.js: javascript運(yùn)行環(huán)境(runtime),不同系統(tǒng)直接運(yùn)行各種編程語言

npm: Nodejs下的包管理器

webpack: 它主要的用途是通過 CommonJS 的語法把所有瀏覽器端需要發(fā)布的靜態(tài)資源做相應(yīng)的準(zhǔn)備，比如資源的合并和打包。

vue-cli: 用戶生成Vue工程模板

開始安裝:

1.nodejs由于我已經(jīng)安裝好了,跳過

2.webpack

npm install webpack -g

3.安裝vue腳手架

npm install vue-cli -g

測(cè)試:

在硬盤上找一個(gè)文件夾放工程用的，在終端中進(jìn)入該目錄

cd 目錄路徑

根據(jù)模板創(chuàng)建項(xiàng)目

vue init webpack-simple 工程名字<工程名字不能用中文>或者創(chuàng)建 vue1.0 的項(xiàng)目vue init webpack-simple#1.0 工程名字<工程名字不能用中文>

工程目錄如圖所示:

安裝項(xiàng)目依賴:

安裝 vue 路由模塊vue-router和網(wǎng)絡(luò)請(qǐng)求模塊vue-resource

進(jìn)入該項(xiàng)目執(zhí)行

npm install vue-router vue-resource --save

啟動(dòng)項(xiàng)目

npm run dev

運(yùn)行就報(bào)錯(cuò)

'NODE_ENV' 不是內(nèi)部或外部命令，也不是可運(yùn)行的程序或批處理文件。npm ERR! Windows_NT 6.1.7601npm ERR! argv "D:\\nodejs\\node.exe" "D:\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"npm ERR! node v4.0.0-rc.5npm ERR! npm v2.14.2npm ERR! code ELIFECYCLEnpm ERR! yy-ydh-web@1.0.7 start: `npm run clear&& NODE_ENV=development && webpack-dev-server --host 0.0.0.0 --devtool eval --progress --color --profile`npm ERR! Exit status 1npm ERR!npm ERR! Failed at the yy-ydh-web@1.0.7 start script 'npm run clear&& NODE_ENV=development && webpack-dev-server --host0.0.0.0 --devtool eval --progress --color --profile'.npm ERR! This is most likely a problem with the yy-ydh-web package,npm ERR! not with npm itself.npm ERR! Tell the author that this fails on your system:npm ERR! npm run clear&& NODE_ENV=development && webpack-dev-server --host 0.0.0.0 --devtool eval --progress --color --profilenpm ERR! You can get their info via:npm ERR! npm owner ls yy-ydh-webnpm ERR! There is likely additional logging output above.npm ERR! Please include the following file with any support request:npm ERR! D:\workspace\node_modules\yy-ydh-web\npm-debug.log

這是windows不支持NODE_ENV=development的設(shè)置方式

解決方法:

●安裝across-env: npm install cross-env --save-dev

●在NODE_ENV=xxxxxxx前面添加cross-env就可以了。

運(yùn)行還是報(bào)錯(cuò):

找不到webpack這個(gè)模塊

module.js:457 throw err; ^Error: Cannot find module 'webpack' at Function.Module._resolveFilename (module.js:455:15) at Function.Module._load (module.js:403:25) at Module.require (module.js:483:17) at require (internal/module.js:20:19) at Object.<anonymous> (D:\vue_work\fendo\webpack.config.js:2:15) at Module._compile (module.js:556:32) at Object.Module._extensions..js (module.js:565:10) at Module.load (module.js:473:32) at tryModuleLoad (module.js:432:12) at Function.Module._load (module.js:424:3)

安裝該模塊:

ccnpm install 模塊名 --save-dev(關(guān)于環(huán)境的，表現(xiàn)為npm run dev 啟動(dòng)不了)cnpm install 模塊名 --save(關(guān)于項(xiàng)目的，比如main.js，表現(xiàn)為npm run dev 成功之后控制臺(tái)報(bào)錯(cuò))比如escape-string-regexp、strip-ansi、has-ansi、is-finite、emojis-list

安裝好后運(yùn)行又報(bào)這個(gè)模塊的錯(cuò):

Error: Cannot find module 'bl' at Function.Module._resolveFilename (module.js:455:15) at Function.Module._load (module.js:403:25) at Module.require (module.js:483:17) at require (internal/module.js:20:19) at Object.<anonymous> (C:\Users\fendo\AppData\Roaming\npm\node_modules\npm\node_modules\request\request.js:9:10) at Module._compile (module.js:556:32) at Object.Module._extensions..js (module.js:565:10) at Module.load (module.js:473:32) at tryModuleLoad (module.js:432:12) at Function.Module._load (module.js:424:3)

接著繼續(xù)安裝