準(zhǔn)備工作

10多年的雞西網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。網(wǎng)絡(luò)營(yíng)銷(xiāo)推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整雞西建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)公司從事“雞西網(wǎng)站設(shè)計(jì)”,“雞西網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

1. 為前端選擇合適的預(yù)處理工具和資源管理工具

預(yù)處理工具又分為 js 預(yù)處理工具和 css 預(yù)處理工具。Javascript 一直以來(lái)最為人詬病的一點(diǎn)就是缺乏原生的模塊機(jī)制，所有 js 代碼文件在被 html 頁(yè)面引入后將共用同一個(gè)命名空間。所以才出現(xiàn)了各種“標(biāo)準(zhǔn)”嘗試解決這個(gè)問(wèn)題，但他們都不是原生的，需要額外的工具對(duì)代碼進(jìn)行特殊處理。雖然 ES6 終于引入了模塊機(jī)制，但以現(xiàn)在的瀏覽器支持程度，還不足以“毫無(wú)顧慮地隨拿隨用”。所以 js 預(yù)處理工具最主要的工作就是幫助解決 js 的模塊問(wèn)題。而 css 預(yù)處理工具則很好理解，就是把 sass，less 或者 stylus 代碼翻譯、合并成 css 代碼。

資源管理工具則是幫我們管理前端所需的各種資源文件（比如 css、js、圖片、字體等等），便于我們引用。目前常用的解決方法是將他們直接編碼進(jìn) js 代碼中，然后像引用 js 模塊一樣引用它們。這可比手寫(xiě)各種 url 方便多了。

正如標(biāo)題所說(shuō)，我們將采用 Webpack，因?yàn)樗邆渖厦嫠f(shuō)的所有功能。此外還支持代碼熱替換，使修改代碼后不用刷新頁(yè)面也能在瀏覽器中立即看到效果。

2. 為后端選擇合適的預(yù)處理工具

后端面對(duì)的都是 js 代碼，不需要前端那樣的資源管理工具，另外， Node 強(qiáng)迫你使用至少一種模塊管理方案（CommonJS 或 ES6 的 import），也不用考慮代碼的依賴問(wèn)題。

所以后端要簡(jiǎn)單許多，唯一需要考慮的基本上就剩下如何將 ES6 轉(zhuǎn)譯成 ES5 了（如果你打算使用 ES6 的話）。目前常用的做法是使用 Babel，你可以用 Babel 命令行工具獨(dú)立執(zhí)行編譯過(guò)程，也可以配置 Babel register 實(shí)現(xiàn)代碼運(yùn)行時(shí)動(dòng)態(tài)翻譯，這對(duì)于開(kāi)發(fā)場(chǎng)景而言無(wú)疑是最方便的。所以我們選擇后一種方式。

3. 為整個(gè)項(xiàng)目選擇合適的流程控制工具

流程控制工具是為了幫助我們管理諸如代碼檢查、編譯、壓縮、移動(dòng)、部署這些任務(wù)的，原本我們是通過(guò)手敲命令（或者高級(jí)一點(diǎn)寫(xiě)個(gè)腳本）的方式做，有了流程控制工具以后，只需要提供配置文件和少量代碼就可以完成。

目前最流行的解決方案是 gulp。不過(guò)，由于我們這里要搭建的是開(kāi)發(fā)環(huán)境，沒(méi)有移動(dòng)代碼、壓縮、部署等需求，所以不需要功能強(qiáng)大的 gulp。我們只要用 nodemon 這個(gè)工具監(jiān)聽(tīng)代碼變動(dòng)然后適時(shí)重啟 server就夠了。

正式開(kāi)始搭建

1. 利用 Express 腳手架快速搭建應(yīng)用

使用 Express 提供的腳手架工具（Express application generator）可以在 1s 之內(nèi)搭建出最基本的應(yīng)用。

如果你以前還沒(méi)試過(guò)，首先執(zhí)行下面的命令安裝

npm install express-generator -g

然后執(zhí)行以下命令生成代碼，命令執(zhí)行過(guò)程中需要輸入一些參數(shù)。

express <myapp>

完成后的文件結(jié)構(gòu)是這樣的

.
├── app.js
├── bin
│  └── www
├── package.json
├── public
│  ├── images
│  ├── javascripts
│  └── stylesheets
│    └── style.css
├── routes
│  ├── index.js
│  └── users.js
└── views
  ├── error.jade
  ├── index.jade
  └── layout.jade

但是這個(gè)文件結(jié)構(gòu)只是后端代碼，要想跟前端代碼相結(jié)合，需要做一些改動(dòng)。我們計(jì)劃最終的文件結(jié)構(gòu)應(yīng)該是這樣的

.
├── src
│  ├── client
│  └── server
└── ...

所以需要將上面自動(dòng)生成的 Express 代碼放到 /src/server/ 路徑下。

接下來(lái)我們要?jiǎng)h除一些用不著的東西以及增加一些缺失的東西。

首先，由于我們打算在前端使用 Vue 框架，并由 Vue-Router 管理大部分路由，后端 Express 僅保留少量的 RESTful API 路由，所以后端不需要復(fù)雜的路由設(shè)置，那么 routes 文件夾下的內(nèi)容可以簡(jiǎn)化成一個(gè) routers.js 文件。

然后，我們需要配置好 Babel register，所以需要在項(xiàng)目跟路徑下新增兩個(gè)文件 .babelrc 和 index.js，內(nèi)容分別為：

/.babelrc

{
 "presets": ["es2015"],
}

.babelrc 是 Babel 6.0 必須的文件

/.index.js

require('babel-register')
require('./src/server')

上面兩句完成 Bebel 注冊(cè)，它會(huì)爬取所有 require 或 import 方式依賴的模塊并把它們翻譯成 ES5。

自動(dòng)生成的代碼里有個(gè) www 文件，他是 Express 應(yīng)用的入口文件，我們把它放在 server 路徑下并改名為 index.js 以便讓上面配置的 Babel register 能正確找到它。

為什么要改名為 index.js ？這是因?yàn)?code> require('./src/server') 在默認(rèn)情況下會(huì)去找 ./src/server/index.js，如果你想用別的名字，那就記得將 Babel register 的配置文件里改為 require(./src/<your entry file> 。

好了，現(xiàn)在后端的事情先暫時(shí)告一段落，接下來(lái)看看前端。

2. 利用 Vue 腳手架快速搭建應(yīng)用

同樣地，推薦使用 Vue 自帶的template 工具，在 1s 內(nèi)生成基本代碼。

雖然利用這個(gè)工具生成的代碼的后端就是基于 Express 的，但是后端部分的代碼結(jié)構(gòu)太簡(jiǎn)單，不適合做后續(xù)開(kāi)發(fā)。所以建議這里先將 Vue 生成的代碼放在另外一個(gè)地方，然后按需移動(dòng)到前面用 Express 生成的代碼文件夾里。

首先安裝 template 工具

npm install -g vue-cli

然后執(zhí)行命令生成代碼。命令執(zhí)行過(guò)程中需要輸入一些參數(shù)

vue init webpack <my-project>

生成的代碼結(jié)構(gòu)是這樣的

.
├── build
│  ├── dev-server.js     # development server script
│  ├── karma.conf.js     # unit testing config
│  ├── webpack.base.conf.js # shared base webpack config
│  ├── webpack.dev.conf.js  # development webpack config
│  ├── webpack.prod.conf.js # production webpack config
│  └── ...
├── src
│  ├── main.js        # app entry file
│  ├── App.vue        # main app component
│  ├── components      # ui components
│  │  └── ...
│  └── assets        # module assets (processed by webpack)
│    └── ...
├── static          # pure static assets (directly copied)
├── dist           # built files ready for deploy
├── test
│  └── unit         # unit tests
│    ├── index.js     # unit test entry file
│    └── ...
├── .babelrc         # babel config
├── .eslintrc.js       # eslint config
├── index.html        # main html file
└── package.json       # build scripts and dependencies

我們發(fā)現(xiàn)這里也有一個(gè) .babelrc，內(nèi)容跟之前自己創(chuàng)建的基本一致，可以忽略它。此外，它還提供了 .eslintrc.js，是為了配合 eslint 檢查代碼是否符合規(guī)范的。這里面的內(nèi)容很簡(jiǎn)單，想要偷懶就直接拿過(guò)來(lái)，覺(jué)得定制的規(guī)則不太符合自己的習(xí)慣的可以另外配置。

然后看到 build 路徑下有 3 個(gè) webpack 有關(guān)的配置文件，因?yàn)槲覀兪且罱ㄩ_(kāi)發(fā)環(huán)境，所以挑里面的 webpack.base.conf.js 和 webpack.dev.conf.js 就可以，建議把內(nèi)容合并到一個(gè) webpack.conf.js 文件里，放在項(xiàng)目的根目錄下。

之后，基本上就是把 src 目錄移動(dòng)到之前用 Express 創(chuàng)建的 /src/client/，我習(xí)慣將所有 js 的入口文件都改為 index.js 所以，這里也可以將 src/client/main.js 改名為 src/client/index.js。

其他的文件先忽略不管。

到這里，前端部分的代碼也基本整理完畢了。

3. 配置 Webpack

我們計(jì)劃讓 Webpack 將前端文件打包成一個(gè) build.js 文件，然后放在 /src/server/public/javascripts 中供 jade 模板使用。所以設(shè)置好 webpack 的路徑部分（其他的保留原來(lái)的就好）：

{
 ...
 entry: path.join(__dirname, 'src/client/index.js'),
  output: {
   path: path.join(__dirname, 'src/server/public/javascripts/'),
   publicPath: '/javascripts/',
   filename: 'build.js'
  },
 ...
}

至于如何啟動(dòng) Webpack，你可以選擇單獨(dú)用一個(gè) shell 窗口運(yùn)行它，也可以以 Express 中間件的形式提供代理。采用后一種方式，webpack 并不會(huì)把打包好的代碼生成在磁盤(pán)上，而是保留在內(nèi)存里。我們選擇后一種方式，因?yàn)楦奖恪?/p>

只應(yīng)該在開(kāi)發(fā)環(huán)境中以 Express 中間件的形式部署 Webpack

所以需要修改 /src/server/index.js，關(guān)鍵是增加這幾句

import webpack from 'webpack'
import webpackDevMiddleware from 'webpack-dev-middleware'
import webpackHotMiddleware from 'webpack-hot-middleware'
import config from '../../webpack.config'

const compiler = webpack(config)

app.use(webpackDevMiddleware(compiler, {
 publicPath: config.output.publicPath,
 stats: { colors: true },
}))

app.use(webpackHotMiddleware(compiler))

這樣每次啟動(dòng) Express 后，Webpack 中間件會(huì)攔截 config.output.publicPath 地址的請(qǐng)求并返回正確的結(jié)果，同時(shí)，如果被 Webpack 監(jiān)聽(tīng)的文件發(fā)生變動(dòng)，會(huì)立即通知前端產(chǎn)生相應(yīng)變化。

4. 配置 Nodemon

之前提到過(guò)，計(jì)劃用 Nodemon 啟動(dòng) server 并監(jiān)聽(tīng)代碼變動(dòng)。而 Nodemon 默認(rèn)會(huì)監(jiān)聽(tīng)除了 .git 和 node_modules 路徑外的所有 js 代碼，因?yàn)槲覀円呀?jīng)有 Webpack 監(jiān)聽(tīng)前端代碼了，所以得做相關(guān)配置讓 Nodemon 只監(jiān)聽(tīng)某一塊代碼。

在項(xiàng)目根路徑下新增文件 nodemon.json，內(nèi)容為

{
 "verbose": true,
 "ignore": ["src/server/public/"],
 "events": {
  "restart": "osascript -e 'display notification \"App restarted due to:\n'$FILENAME'\" with title \"nodemon\"'"
 },
 "watch": ["src/server/"],
 "env": {
  "NODE_ENV": "development"
 },
 "ext": "js jade"
}

其中，將 verbose 設(shè)置為 true 將打印更豐富的日志信息，對(duì)開(kāi)發(fā)很有幫助。

我們選擇讓 Nodemon 監(jiān)聽(tīng) src/server/ 目錄，并忽略 src/server/public 目錄，因?yàn)槟抢锸乔岸?webpack 生成打包文件的地方。注意我們是以 Express 中間件的形式使用 Webpack，并不會(huì)在磁盤(pán)上真的產(chǎn)生文件，所以這個(gè) ignore 規(guī)則其實(shí)可以省略。

別忘了在文件擴(kuò)展名中增加 jade 類(lèi)型，因?yàn)?Express 使用的是 jade 模板。

5. 配置 package.json

首先在 script 中增加一個(gè)命令，用來(lái)啟動(dòng)整個(gè)應(yīng)用

{
 ...
 "scripts": {
  "dev": "nodemon index.js"
 },
 ...
}

這樣，只需要運(yùn)行 npm run dev 這一個(gè)命令就可以啟動(dòng) server 同時(shí)進(jìn)行開(kāi)發(fā)了。

完整的代碼已經(jīng)上傳 Github，點(diǎn)擊訪問(wèn)

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

分享標(biāo)題：詳解如何從零開(kāi)始搭建Express+Vue開(kāi)發(fā)環(huán)境
本文路徑：http://chinadenli.net/article28/gdgpjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開(kāi)發(fā)、網(wǎng)站收錄、網(wǎng)站建設(shè)、App開(kāi)發(fā)、外貿(mào)網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)