摘要：從零開始搭建一個(gè)項(xiàng)目一搭建一個(gè)可靠成熟的項(xiàng)目介紹我是去年六月份接觸的，當(dāng)時(shí)還是個(gè)菜逼，當(dāng)然現(xiàn)在也是，寫了一年，抄代碼的時(shí)候一直是，在別人的框架基礎(chǔ)上開發(fā)，然后漸漸發(fā)現(xiàn)很多的模板都各有優(yōu)點(diǎn)，所以慢慢的開始集合到了一起。

vue-cli

我是去年六月份接觸的vue1.0，當(dāng)時(shí)還是個(gè)菜逼，當(dāng)然現(xiàn)在也是，寫了一年，抄代碼的時(shí)候一直是copycopy，在別人的框架基礎(chǔ)上開發(fā)，然后漸漸發(fā)現(xiàn)很多vue-start的模板都各有優(yōu)點(diǎn)，所以慢慢的開始集合到了一起。

使用vue-cli從零開始搭建的話，一些webpack配置也可以讓自己明白webpack其實(shí)可以做更多的事情。

在使用vue的過程中，轉(zhuǎn)行做了ng4半年左右，對(duì)vue也有了更深的理解。

還有一個(gè)cooking-cli，配置更簡(jiǎn)單，假如不想看webpack的復(fù)雜配置，可以直接跳到第二篇文章。

node + webapack
webapck需要node提供服務(wù)，并且需要npm安裝，所以先下載一個(gè)node

安裝node

node下載

mac推薦下載最新穩(wěn)定版，windows下載最新版本

下載完成后，打開命令行，輸入npm -v 確認(rèn)安裝完成（安利一個(gè)命令行工具,同時(shí)具備git bash -- ConEmu）

命令行全局安裝webpack + vue-cli

npm太慢的話，可以使用cnpm或者yarn（這步可以略過,下面是cnpm的安裝，此后npm命令變成cnpm）

    npm install -g cnpm --registry=https://registry.npm.taobao.org    

安裝webpack + vue-cli

    npm install -g webpack vue-cli

vue-cli搭建項(xiàng)目

講解部分webpack配置文件

講解項(xiàng)目目錄

配置路由以及路由文件

構(gòu)建完成

初始化項(xiàng)目

打開cmd工具 cd /你的項(xiàng)目目錄 例:cd f:/plugins

vue init webpack vue-start

這里其實(shí)可以一路回車，然后項(xiàng)目就構(gòu)建好了，稍微講解一下這些配置吧

? Project name vue-start //你的項(xiàng)目名稱
? Project description A Vue.js project // 你的項(xiàng)目描述
? Author 小帥  // 作者的名稱
? Vue build standalone // 這個(gè)直接選前者，畢竟是推薦
? Install vue-router? Yes // 是否安裝vue-router 選是
? Use ESLint to lint your code? No // 是否使用eslint管理代碼，個(gè)人項(xiàng)目不推薦，不然你還會(huì)想辦法關(guān)掉它
? Setup unit tests with Karma + Mocha? No // 是否使用karma + mocha 否 因人而異吧，我基本不寫測(cè)試代碼
? Setup e2e tests with Nightwatch? No // 是否安裝e2e測(cè)試 否

然后

cd vue-start // 進(jìn)入項(xiàng)目目錄
npm i //安裝項(xiàng)目依賴
npm run dev // 開始！

我們直接來看看項(xiàng)目目錄，分析一下，推薦編輯器vscode，這里有一大波vscode的插件！

目錄解析

build -- 這個(gè)文件夾大部分是webpack的配置文件

config -- 一些配置文件，比如配置監(jiān)聽端口

node_modules -- 你的依賴包都在這里

src -- 主工程文件夾，基本上所有的開發(fā)都在這個(gè)文件夾進(jìn)行

static -- 靜態(tài)文件目錄

package.json -- 這個(gè)文件是項(xiàng)目的一些配置信息

這篇文章就不做更多的剖析了，直接進(jìn)入實(shí)戰(zhàn)吧

npm run dev之后 會(huì)自動(dòng)打開一個(gè)瀏覽器，但是我覺得這個(gè)設(shè)定我不喜歡，先把這個(gè)功能給禁了吧

build/dev-server.js 73行開始

devMiddleware.waitUntilValid(() => {
  console.log("> Listening at " + uri + "
")
  // when env is testing, don"t need open it
  if (autoOpenBrowser && process.env.NODE_ENV !== "testing") {
    opn(uri)
  }
  _resolve()
})

把這行代碼直接注釋掉
  // if (autoOpenBrowser && process.env.NODE_ENV !== "testing") {
  //   opn(uri)
  // }

現(xiàn)在打開瀏覽器 localhost:8080 項(xiàng)目已經(jīng)可以運(yùn)行了

命令行ctrl + c退出進(jìn)程 現(xiàn)在來試試打包

先安裝一個(gè)插件anywhere 這個(gè)是提供http服務(wù)的 直接npm i -g anywhere

安裝完成后直接來測(cè)試生產(chǎn)環(huán)境，先把生產(chǎn)環(huán)境配置好，以后省功夫

cmd輸入 npm run build && anywhere

然后瀏覽器輸入 http://localhost:8000/dist/ 然后發(fā)現(xiàn)頁面并沒有預(yù)期的效果，審查元素可以看出js的路徑都錯(cuò)了，這個(gè)時(shí)候需要修改一個(gè)配置文件

config/index.js

module.exports = {
  build: {
    env: require("./prod.env"),
    index: path.resolve(__dirname, "../dist/index.html"),
    assetsRoot: path.resolve(__dirname, "../dist"),
    assetsSubDirectory: "static",
    assetsPublicPath: "/",
    productionSourceMap: true,
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ["js", "css"],
    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  },
  dev: {
    env: require("./dev.env"),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: "static",
    assetsPublicPath: "/",
    proxyTable: {},
    // CSS Sourcemaps off by default because relative paths are "buggy"
    // with this option, according to the CSS-Loader README
    // (https://github.com/webpack/css-loader#sourcemaps)
    // In our experience, they generally work as expected,
    // just be aware of this issue when enabling this option.
    cssSourceMap: false
  }
}

把build（生產(chǎn)環(huán)境）的assetsPublicPath修改為相對(duì)路徑 也就是修改為
assetsPublicPath: "./"

然后重新運(yùn)行一次 npm run build && anywhere

這個(gè)時(shí)候就可以看到和開發(fā)環(huán)境一樣的效果了，這就是線上的環(huán)境

本篇文章就介紹到這里 下一篇文章將會(huì)介紹如何配置圖片的路徑，以及路由配置。

一個(gè)團(tuán)結(jié)互助的討論組，專注前端三十年！