国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

一步一步創建vue2.0項目(一)

ranwu / 1660人閱讀

摘要:一步一步創建項目已經發正式版本了,來研究一下吧新建一個文件夾。文件內容本身是一個字符串,不僅僅是一個對象。代碼如下下一步開始創建文件。

一步一步創建vue2.0項目

vue2.0已經發正式版本了,來研究一下吧

新建一個文件夾 vue2.0-learn 。_前提是默認已經安裝了nodejs和npm_

  npm init

按照步驟初始化package.json,這個文件提供了這個項目需要的全部信息,包括name,version,依賴包等等其他的信息。文件內容本身是一個JSON字符串,不僅僅是一個javascript對象。

然后我們得到了一個package.json文件

  npm install vue --save

由于vue的默認版本已經是2.0+了,所以直接不加版本號安裝,就已經是2.0+了,如果需要安裝其他版本號,可以加版本好安裝,例如 npm install veu@1.0.0 --save ,--save的作用是安裝之后自動加入到package.json的dependencies依賴列表里面

復雜頁面必然要模塊化、組件話?,F在最流行的模塊打包工具莫過于webpack,用過vue1.0和react之類的框架就很熟悉了

  npm install webpack --save-dev

這里為什么是--save-dev是因為這種腳手架類的安裝包,不需要打包到框架中去,只有開發者才會使用到。就不需要放到dependencies,而是放到devDependencies里面去

web開發自然是需要一個web服務器容器的,我們可以使用各種服務器,這里我們使用webpack-dev-server,webpack自帶的server,因為和webpack結合的更緊密,也有很多更好用的功能

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

es6語法已經很流行了,使用es6語法,帶來很多更好的開發體驗。webpack自帶loader解析器,可以根據需要配置loader插件,解析es6語法,我們使用babel

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

安裝完之后,在項目根目錄下面新建一個.babelrc文件,這是babel的配置文件

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

下面開始業務代碼的編寫,新建一個index.html文件



  
    
    vue-demo
  
  
    

新建一個src文件夾,這里面放置的是源代碼

新建一個App.vue文件,這個是項目根組件,使用的是vue單文件的組織方式,代碼如下:







創建main.js,這個文件是項目初始化文件。代碼如下:

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

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

下一步開始創建webpack文件。

一般我們的代碼會區分開發環境和生產環境,開發環境不需要壓縮代碼,需要可以調試。

而生產環境則需要壓縮,去除調試代碼等等其他一系列區別的事情。

所以我們先新建兩個文件:dev.js和prod.js,先創建dev.js,這是開發環境webpack配置

var path = require("path")

module.exports = {
  // 項目根目錄
  context: path.join(__dirname, "../"),
  // 項目入口
  entry: [
    "./src/main.js"
  ],
  // 打包編譯生成文件配置
  output: {
    path: path.join(__dirname, "../build"),  // 編譯文件存儲目錄
    filename: "index.js",   // 編譯后的入口文件
    publicPath: "/build/",   // devServer訪問的路徑前綴
    chunkFilename: "[name]-[chunkhash:8].js"  // 編譯的分塊代碼可以使用文件hash作為文件名,按需加載的時候會產生
  },
  resolve: {
    extensions: ["", ".js", ".vue"],   // 引入文件的默認擴展名
    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
      }
    ]
  }
}

好了,一個簡單的webpack config文件就創建好了,切換到項目根目錄,運行 webpack --config ./webpack/dev.js ,可以看到在根目錄下面生成一個build文件夾,下面有個index.js文件,這個就是生成的可以瀏覽器運行的文件

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

  
    

在瀏覽器里面打開這個頁面,OK,不出意外的是可以運行的。

然而web開發我們并沒有使用服務器,這會有很多限制,比如加載文件,ajax請求等等,所以我們使用了上文提到的webpack-dev-server。使用這個可以快速啟動一個本地server,和webpack配合起來還有很多其他功能,比如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  // 控制臺輸出帶顏色
  },
  historyApiFallback: {
    index: "/index.html"  // history api 會定位到的頁面
  },
  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

這時候直接瀏覽器訪問http://localhost:9999,直接可以訪問到我們剛剛看到的相同的頁面,而且默認開始了watch功能,修改之后直接編譯了,不需要在重新運行webpack了

這時候我們回過頭去看webpack的dev配置,好像太過于簡陋了

因為瀏覽器里面加載到的是編譯之后的代碼,所以這非常不利于我們打斷點,不過幸好,現代瀏覽器都支持sourceMap功能,webpack配置起來也很簡單

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

加上這一句話,再重新運行一下程序我們就看到除了生成index.js文件之外,還生成了index.js.map文件,這里面就是源文件,我們可以在chrome的source下面的webpack文件夾下面看到對應我們書寫的源文件了,我們在這邊打斷點調試了

如果有瀏覽器自動刷新就更好了,更新如下

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()
  ]

沒有代碼檢查,怎么做團隊協作啊,我們使用比較火的eslint

新建一個文件.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/
      }
    ]

下面就要安裝我們需要的依賴包了

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

安裝完成,測試可以了,已經開始檢測代碼了,看起來舒服多了,順便把代碼格式化一下吧。

還記得我們在之前的index.html里面手動插入了一行script引入了代碼,這個腳本是我們通過webpack生成的,我們在webpack里面指定了名稱,我們需要在html里面需要寫一個一模一樣的名稱,同樣的代碼我們維護了兩遍,這是不能忍的

這里我們使用到一個插件HtmlWebpackPlugin,可以自動在script標簽中插入script

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

事實勝于雄辯,以上的解決方案并不適合。因為webpackDevSever生成的文件是存儲在內存里面的,使用historyApiFallback定位不到,所以還是在index.html里面維護這個script的引用吧

上文提到我們需要本地開發和發布到線上去,線上服務器環境肯定是不能使用webpack-dev-server的,我們是需要生成真實的文件存儲到磁盤上,發布到服務器環境上去,所以我們需要一份prod的webpack配置文件。

  npm install webpack-merge --save-dev

調整之后的webpackBase.js文件如下

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

module.exports = {
  // 項目根目錄
  context: path.join(__dirname, "../"),
  // 項目入口
  entry: [
    "./src/main.js"
  ],
  // 打包編譯生成文件配置
  output: {
    path: path.join(__dirname, "../build"),  // 編譯文件存儲目錄
    filename: "index.js",   // 編譯后的入口文件
    publicPath: "/build/",   // devServer訪問的路徑前綴
    chunkFilename: "[name]-[chunkhash:8].js"  // 編譯的分塊代碼可以使用文件hash作為文件名,按需加載的時候會產生
  },
  resolve: {
    extensions: ["", ".js", ".vue"],   // 引入文件的默認擴展名
    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
    })
  ]
})

運行 webpack --config ./webpack/prod.js 會看到生成的文件,到時候我們只需要把這些文件上傳到服務器就OK了

添加npm script的,快速運行

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

至此,環境配置結束

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/82629.html

相關文章

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<