vue-cli初始化步驟

時間 2019-12-07

標籤 vue cli 初始化步驟简体版

原文原文鏈接

建立一個vue-cli 項目，總結網上已有資料。
首先要安裝node.js，才能安裝vue。html

npm install -g vue-clivue
vue --versionnode
vue init webpack/simple/browserify myFirstProject 建立項目webpack
cd myFirstProject 進入項目git
npm install 安裝依賴github
npm run dev 啓動web

下面是建立好的項目：
vuex

package.jsonnpm

package.json文件是項目根目錄下的一個文件，定義該項目開發所須要的各類模塊以及一些項目配置信息（如項目名稱、版本、描述、做者等）。
scripts字段

package.json文件裏有一個scripts字段。

"scripts": {
    "dev": "node build/dev-server.js",
    "build": "node build/build.js"
  }

在開發環境下，在命令行中運行npm run dev就至關於在執行node build/dev-server.js。因此script字段是用來指定npm相關命令的縮寫的。
dependencies字段和devDependencies字段

dependencies字段指定了項目運行時所依賴的模塊，devDependencies字段指定了項目開發時所依賴的模塊。在命令行中運行npm install命令，會自動安裝dependencies和devDependencies字段中的模塊。
package.json還有不少配置相關項，想進一步瞭解package.json的可參考：https://docs.npmjs.com/files/...
webpack配置相關

上面說到在命令行中npm run dev就至關於在執行node build/dev-server.js，想必dev-server.js這個文件是十分重要的，它是在開發環境下構建時第一個要運行的文件。掘金上已經有一篇對vue-cli#2.0 webpack配置的分析文章，裏面詳細講解了webpack相關配置文件的每行代碼的意思，我只作一些補充。連接在此（必定要自習閱讀，收穫會很大）：https://gold.xitu.io/post/584...。
dev-server.js文件

...
...
// http-proxy能夠實現轉發全部請求代理到後端真實API地址，以實現先後端開發徹底分離
// 在config/index.js中能夠對proxyTable想進行配置
var proxyMiddleware = require('http-proxy-middleware')
...
...
// 熱加載要使用webpack-dev-middleware在沒有webpack-dev-server的時候進行熱加載
var hotMiddleware = require('webpack-hot-middleware')(compiler)
// 當html-webpack-plugin模板改變是強制進行頁面從新加載
compiler.plugin('compilation', function (compilation) {
  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
    hotMiddleware.publish({ action: 'reload' })
    cb()
  })
})

webpack.base.conf.js文件

...
...
module.export = {
    // 編譯入口文件
    entry: {},
    // 編譯輸出路徑
    output: {},
    // 一些解決方案配置
    resolve: {},
    resolveLoader: {},
    module: {
        // 各類不一樣類型文件加載器配置
        loaders: {
        ...
        ...
        // js文件用babel轉碼
        {
            test: /\.js$/,
            loader: 'babel',
            include: projectRoot,
            // 哪些文件不須要轉碼
            exclude: /node_modules/
        },
        ...
        ...
        }
    },
    // vue文件一些相關配置
    vue: {}
}

check-version.js文件

這個文件主要是用來檢測當前環境中的node和npm版本和咱們須要的是否一致的。

// 加載語義化版本測試庫
var semver = require('semver')
// 定製控制檯日誌的輸入樣式
var chalk = require('chalk')
// 引入package.json文件
var packageConfig = require('../package.json')
var exec = function (cmd) {
  return require('child_process')
    .execSync(cmd).toString().trim()
}
// 定義node和npm版本需求所組成的數組
var versionRequirements = [
  {
    name: 'node',
    currentVersion: semver.clean(process.version),
    versionRequirement: packageConfig.engines.node
  },
  {
    name: 'npm',
    currentVersion: exec('npm --version'),
    versionRequirement: packageConfig.engines.npm
  }
]
module.exports = function () {
  var warnings = []
  // 依次判斷版本是否符合要求
  for (var i = 0; i < versionRequirements.length; i++) {
    var mod = versionRequirements[i]
    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
      warnings.push(mod.name + ': ' +
        chalk.red(mod.currentVersion) + ' should be ' +
        chalk.green(mod.versionRequirement)
      )
    }
  }
  ...
}

想把webpack徹底搞懂仍是須要費很大功夫的，我感受本身也只是入了一個門而已，要想深刻了解webpack仍是要去官網看說明文檔。

http://webpack.github.io/docs/

https://webpack.js.org/configuration/

.babelrc

Babel解釋器的配置文件，存放在根目錄下。Babel是一個轉碼器，項目裏須要用它將ES6代碼轉爲ES5代碼。這裏有一篇阮一峯老師寫的相關文章供參考：Babel 入門教程

// 設定轉碼規則
  "presets": ["es2015", "stage-2"],
  // 轉碼的一些插件
  "plugins": ["transform-runtime"],
  "comments": false

.editorconfig

該文件定義項目的編碼規範，編輯器的行爲會與.editorconfig 文件中定義的一致，而且其優先級比編輯器自身的設置要高，這在多人合做開發項目時十分有用並且必要。

root = true

[*]    // 對全部文件應用下面的規則
charset = utf-8                    // 編碼規則用utf-8
indent_style = space               // 縮進用空格
indent_size = 2                    // 縮進數量爲2個空格
end_of_line = lf                   // 換行符格式
insert_final_newline = true        // 是否在文件的最後插入一個空行
trim_trailing_whitespace = true    // 是否刪除行尾的空格

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。