一步一步創(chuàng)建vue2.0項(xiàng)目（一）

ranwu 發(fā)布于2019-08-20 15:58 / 1669人閱讀

摘要：一步一步創(chuàng)建項(xiàng)目已經(jīng)發(fā)正式版本了，來(lái)研究一下吧新建一個(gè)文件夾。文件內(nèi)容本身是一個(gè)字符串，不僅僅是一個(gè)對(duì)象。代碼如下下一步開(kāi)始創(chuàng)建文件。

一步一步創(chuàng)建vue2.0項(xiàng)目

vue2.0已經(jīng)發(fā)正式版本了，來(lái)研究一下吧

新建一個(gè)文件夾 vue2.0-learn 。_前提是默認(rèn)已經(jīng)安裝了nodejs和npm_

  npm init

按照步驟初始化package.json，這個(gè)文件提供了這個(gè)項(xiàng)目需要的全部信息，包括name，version，依賴(lài)包等等其他的信息。文件內(nèi)容本身是一個(gè)JSON字符串，不僅僅是一個(gè)javascript對(duì)象。

然后我們得到了一個(gè)package.json文件

  npm install vue --save

由于vue的默認(rèn)版本已經(jīng)是2.0+了，所以直接不加版本號(hào)安裝，就已經(jīng)是2.0+了，如果需要安裝其他版本號(hào)，可以加版本好安裝，例如 npm install [email protected] --save ，--save的作用是安裝之后自動(dòng)加入到package.json的dependencies依賴(lài)列表里面

復(fù)雜頁(yè)面必然要模塊化、組件話(huà)?，F(xiàn)在最流行的模塊打包工具莫過(guò)于webpack，用過(guò)vue1.0和react之類(lèi)的框架就很熟悉了

  npm install webpack --save-dev

這里為什么是--save-dev是因?yàn)檫@種腳手架類(lèi)的安裝包，不需要打包到框架中去，只有開(kāi)發(fā)者才會(huì)使用到。就不需要放到dependencies，而是放到devDependencies里面去

web開(kāi)發(fā)自然是需要一個(gè)web服務(wù)器容器的，我們可以使用各種服務(wù)器，這里我們使用webpack-dev-server，webpack自帶的server，因?yàn)楹蛍ebpack結(jié)合的更緊密，也有很多更好用的功能

  npm install webpack-dev-server --save-dev

es6語(yǔ)法已經(jīng)很流行了，使用es6語(yǔ)法，帶來(lái)很多更好的開(kāi)發(fā)體驗(yàn)。webpack自帶loader解析器，可以根據(jù)需要配置loader插件，解析es6語(yǔ)法，我們使用babel

  npm install babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-2 --save-dev

安裝完之后，在項(xiàng)目根目錄下面新建一個(gè).babelrc文件，這是babel的配置文件

{
  "presets": ["es2015", "stage-2"],
  "plugins": ["transform-runtime"],
  "comments": false
}

下面開(kāi)始業(yè)務(wù)代碼的編寫(xiě)，新建一個(gè)index.html文件



  
    
    vue-demo

新建一個(gè)src文件夾，這里面放置的是源代碼

新建一個(gè)App.vue文件，這個(gè)是項(xiàng)目根組件，使用的是vue單文件的組織方式，代碼如下：

創(chuàng)建main.js，這個(gè)文件是項(xiàng)目初始化文件。代碼如下：

import Vue from "vue"
import App from "./App"

new Vue({
  el: "#app",
  template: "",
  components: { App }
})

下一步開(kāi)始創(chuàng)建webpack文件。

一般我們的代碼會(huì)區(qū)分開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境，開(kāi)發(fā)環(huán)境不需要壓縮代碼，需要可以調(diào)試。

而生產(chǎn)環(huán)境則需要壓縮，去除調(diào)試代碼等等其他一系列區(qū)別的事情。

所以我們先新建兩個(gè)文件：dev.js和prod.js，先創(chuàng)建dev.js，這是開(kāi)發(fā)環(huán)境webpack配置

var path = require("path")

module.exports = {
  // 項(xiàng)目根目錄
  context: path.join(__dirname, "../"),
  // 項(xiàng)目入口
  entry: [
    "./src/main.js"
  ],
  // 打包編譯生成文件配置
  output: {
    path: path.join(__dirname, "../build"),  // 編譯文件存儲(chǔ)目錄
    filename: "index.js",   // 編譯后的入口文件
    publicPath: "/build/",   // devServer訪(fǎng)問(wèn)的路徑前綴
    chunkFilename: "[name]-[chunkhash:8].js"  // 編譯的分塊代碼可以使用文件hash作為文件名,按需加載的時(shí)候會(huì)產(chǎn)生
  },
  resolve: {
    extensions: ["", ".js", ".vue"],   // 引入文件的默認(rèn)擴(kuò)展名
    alias: {
      vue: "vue/dist/vue.js"    //別名配置 解決vue template 警告bug
    }
  },
  module: {
    loaders: [
      {
        test: /.vue$/,
        loader: "vue"
      },
      {
        test: /.js$/,
        loader: "babel",
        exclude: /node_modules/
      },
      {
        test: /.css$/,
        loader: "style!css",
        include: __dirname
      },
      {
        test: /.less$/,
        loader: "style!css!less",
        include: __dirname
      }
    ]
  }
}

好了，一個(gè)簡(jiǎn)單的webpack config文件就創(chuàng)建好了，切換到項(xiàng)目根目錄，運(yùn)行 webpack --config ./webpack/dev.js ，可以看到在根目錄下面生成一個(gè)build文件夾，下面有個(gè)index.js文件，這個(gè)就是生成的可以瀏覽器運(yùn)行的文件

直接修改index.html文件，添加一行

在瀏覽器里面打開(kāi)這個(gè)頁(yè)面，OK，不出意外的是可以運(yùn)行的。

然而web開(kāi)發(fā)我們并沒(méi)有使用服務(wù)器，這會(huì)有很多限制，比如加載文件，ajax請(qǐng)求等等，所以我們使用了上文提到的webpack-dev-server。使用這個(gè)可以快速啟動(dòng)一個(gè)本地server，和webpack配合起來(lái)還有很多其他功能，比如http代理，history api等功能

var webpackDevServer = require("webpack-dev-server");
var webpack = require("webpack");
var webpackConfig = require("../webpack/dev");
var config = require("../config")

var compiler = webpack(webpackConfig);

var server = new webpackDevServer(compiler, {
  stats: {
    colors: true  // 控制臺(tái)輸出帶顏色
  },
  historyApiFallback: {
    index: "/index.html"  // history api 會(huì)定位到的頁(yè)面
  },
  publicPath: webpackConfig.output.publicPath,  // 編譯文件的前綴
  proxy: {    // http代理

  }
});

server.listen(config.port, err => {
  if (err) {
    console.log(err)
    return
  }
  console.log(`Listening at http://${config.address}:${config.port}
`)
});

module.exports = server

這時(shí)候直接瀏覽器訪(fǎng)問(wèn)http://localhost:9999，直接可以訪(fǎng)問(wèn)到我們剛剛看到的相同的頁(yè)面，而且默認(rèn)開(kāi)始了watch功能，修改之后直接編譯了，不需要在重新運(yùn)行webpack了

這時(shí)候我們回過(guò)頭去看webpack的dev配置，好像太過(guò)于簡(jiǎn)陋了

因?yàn)闉g覽器里面加載到的是編譯之后的代碼，所以這非常不利于我們打斷點(diǎn)，不過(guò)幸好，現(xiàn)代瀏覽器都支持sourceMap功能，webpack配置起來(lái)也很簡(jiǎn)單

  context: path.join(__dirname, "../"),
  devtool: "source-map",

加上這一句話(huà)，再重新運(yùn)行一下程序我們就看到除了生成index.js文件之外，還生成了index.js.map文件，這里面就是源文件，我們可以在chrome的source下面的webpack文件夾下面看到對(duì)應(yīng)我們書(shū)寫(xiě)的源文件了，我們?cè)谶@邊打斷點(diǎn)調(diào)試了

如果有瀏覽器自動(dòng)刷新就更好了，更新如下

var path = require("path")
var config = require("../config")
var webpack = require("webpack")

entry: [
    "./src/main.js",
    `webpack-dev-server/client?http://${config.address}:${config.port}`,
    "webpack/hot/only-dev-server",
  ],

  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]

沒(méi)有代碼檢查，怎么做團(tuán)隊(duì)協(xié)作啊，我們使用比較火的eslint

新建一個(gè)文件.eslintrc

{
  "root": true,
  "parser": "babel-eslint",
  "env": {
    "browser": true
  },
  "parserOptions": {
    "sourceType": "module"
  },
  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
  "extends": "standard",
  // required to lint *.vue files
  "plugins": [
    "html"
  ],
  // add your custom rules here
  "rules": {
    // allow paren-less arrow functions
    "arrow-parens": 0,
    // allow async-await
    "generator-star-spacing": 0,
    //
    "space-before-function-paren": ["error", { "anonymous": "always", "named": "never" }]
  }
}

修改webpack文件

    preLoaders: [
      {
        test: /.vue$/,
        loader: "eslint",
        exclude: /node_modules|assets/
      },
      {
        test: /.js$/,
        loader: "eslint",
        exclude: /node_modules|assets/
      }
    ]

下面就要安裝我們需要的依賴(lài)包了

  npm install babel-eslint eslint-plugin-html eslint eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-friendly-formatter eslint-loader --save-dev

安裝完成，測(cè)試可以了，已經(jīng)開(kāi)始檢測(cè)代碼了，看起來(lái)舒服多了，順便把代碼格式化一下吧。

還記得我們?cè)谥暗膇ndex.html里面手動(dòng)插入了一行script引入了代碼，這個(gè)腳本是我們通過(guò)webpack生成的，我們?cè)趙ebpack里面指定了名稱(chēng)，我們需要在html里面需要寫(xiě)一個(gè)一模一樣的名稱(chēng)，同樣的代碼我們維護(hù)了兩遍，這是不能忍的

這里我們使用到一個(gè)插件HtmlWebpackPlugin，可以自動(dòng)在script標(biāo)簽中插入script

  npm install html-webpack-plugin --save-dev

事實(shí)勝于雄辯，以上的解決方案并不適合。因?yàn)閣ebpackDevSever生成的文件是存儲(chǔ)在內(nèi)存里面的，使用historyApiFallback定位不到，所以還是在index.html里面維護(hù)這個(gè)script的引用吧

上文提到我們需要本地開(kāi)發(fā)和發(fā)布到線(xiàn)上去，線(xiàn)上服務(wù)器環(huán)境肯定是不能使用webpack-dev-server的，我們是需要生成真實(shí)的文件存儲(chǔ)到磁盤(pán)上，發(fā)布到服務(wù)器環(huán)境上去，所以我們需要一份prod的webpack配置文件。

  npm install webpack-merge --save-dev

調(diào)整之后的webpackBase.js文件如下

var path = require("path")
var webpack = require("webpack")

module.exports = {
  // 項(xiàng)目根目錄
  context: path.join(__dirname, "../"),
  // 項(xiàng)目入口
  entry: [
    "./src/main.js"
  ],
  // 打包編譯生成文件配置
  output: {
    path: path.join(__dirname, "../build"),  // 編譯文件存儲(chǔ)目錄
    filename: "index.js",   // 編譯后的入口文件
    publicPath: "/build/",   // devServer訪(fǎng)問(wèn)的路徑前綴
    chunkFilename: "[name]-[chunkhash:8].js"  // 編譯的分塊代碼可以使用文件hash作為文件名,按需加載的時(shí)候會(huì)產(chǎn)生
  },
  resolve: {
    extensions: ["", ".js", ".vue"],   // 引入文件的默認(rèn)擴(kuò)展名
    alias: {
      vue: "vue/dist/vue.js"    // 解決vue template 警告bug
    }
  },
  module: {
    preLoaders: [
      {
        test: /.vue$/,
        loader: "eslint",
        exclude: /node_modules|assets/
      },
      {
        test: /.js$/,
        loader: "eslint",
        exclude: /node_modules|assets/
      }
    ],
    loaders: [
      {
        test: /.vue$/,
        loader: "vue"
      },
      {
        test: /.js$/,
        loader: "babel",
        exclude: /node_modules/
      },
      {
        test: /.css$/,
        loader: "style!css",
        include: __dirname
      },
      {
        test: /.less$/,
        loader: "style!css!less",
        include: __dirname
      }
    ]
  },
  plugins: []
}

dev文件如下：

var config = require("../config")
var webpack = require("webpack")
var merge = require("webpack-merge")
var baseConfig = require("./base")

module.exports = merge(baseConfig, {
  devtool: "source-map",
  entry: [
    ...baseConfig.entry,
    `webpack-dev-server/client?http://${config.address}:${config.port}`,
    "webpack/hot/only-dev-server",
  ],
  plugins: [
    ...baseConfig.plugins
  ]
})

prod.js如下

var merge = require("webpack-merge")
var baseConfig = require("./base")
var fs = require("fs")
var HtmlWebpackPlugin = require("html-webpack-plugin")

var scriptReg = /.*/mgi
var template = fs.readFileSync("./index.dev.html", "utf8")
if(!template){
  throw "獲取模版失敗"
}
var templateContent = template.replace(scriptReg, "")

module.exports = merge(baseConfig, {
  plugins: [
    ...baseConfig.plugins,
    new HtmlWebpackPlugin({
      filename: "../../index.html",
      hash: true,
      templateContent: templateContent,
      minify: false,
      inject: true
    })
  ]
})

運(yùn)行 webpack --config ./webpack/prod.js 會(huì)看到生成的文件，到時(shí)候我們只需要把這些文件上傳到服務(wù)器就OK了

添加npm script的，快速運(yùn)行

"scripts": {
    "dev": "node ./server/index.js",
    "prod": "webpack --config ./webpack/prod.js",
    "test": "echo "Error: no test specified" && exit 1"
}

至此，環(huán)境配置結(jié)束

GPU云服務(wù)器云服務(wù)器一步一步寫(xiě)java php撤回一步走一步進(jìn)一步

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/82629.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

ranwu

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

Python基礎(chǔ)學(xué)習(xí)(十)

閱讀 3186·2021-09-10 10:51
FIN8開(kāi)始針對(duì)金融機(jī)構(gòu)!利用新的惡意軟件部署后門(mén)竊取信息

閱讀 3369·2021-08-31 09:38
svgtofont.js 自動(dòng)生成圖標(biāo)字體和彩色圖標(biāo)文件

閱讀 1660·2019-08-30 15:54
根據(jù)瀏覽器渲染界面原理理解渲染阻塞、瀏覽器的重繪（repaints）與回流（reflows）

閱讀 3147·2019-08-29 17:22
ubuntu 14.04安裝前端工程運(yùn)行環(huán)境

閱讀 3225·2019-08-26 13:53
JS基礎(chǔ)入門(mén)篇（二十）—事件和事件對(duì)象（一）

閱讀 1978·2019-08-26 11:59
dva+react+antd+webpack 項(xiàng)目開(kāi)發(fā)配置

閱讀 3294·2019-08-26 11:37
JavaScript數(shù)組合并和數(shù)組排列組合

閱讀 3324·2019-08-26 10:47

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

一步一步創(chuàng)建vue2.0項(xiàng)目（一）

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

ranwu

男|高級(jí)講師

TA的文章

Python基礎(chǔ)學(xué)習(xí)(十)

FIN8開(kāi)始針對(duì)金融機(jī)構(gòu)!利用新的惡意軟件部署后門(mén)竊取信息

svgtofont.js 自動(dòng)生成圖標(biāo)字體和彩色圖標(biāo)文件

根據(jù)瀏覽器渲染界面原理理解渲染阻塞、瀏覽器的重繪（repaints）與回流（reflows）

ubuntu 14.04安裝前端工程運(yùn)行環(huán)境

JS基礎(chǔ)入門(mén)篇（二十）—事件和事件對(duì)象（一）

dva+react+antd+webpack 項(xiàng)目開(kāi)發(fā)配置

JavaScript數(shù)組合并和數(shù)組排列組合

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

一步一步創(chuàng)建vue2.0項(xiàng)目（一）

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！