您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)vue腳手架vue-cli怎么用的內(nèi)容。小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧。
vue-cli的模板
vue-cli的腳手架項(xiàng)目模板有webpack-simple 和 webpack
兩種的區(qū)別在于webpack-simple 沒(méi)有包括Eslint 檢查等功能
vue-cli的項(xiàng)目結(jié)構(gòu)
. |-- build // 項(xiàng)目構(gòu)建(webpack)相關(guān)代碼 | |-- build.js // 生產(chǎn)環(huán)境構(gòu)建代碼 | |-- check-version.js // 檢查node、npm等版本 | |-- dev-client.js // 熱重載相關(guān) | |-- dev-server.js // 構(gòu)建本地服務(wù)器 | |-- utils.js // 構(gòu)建工具相關(guān) | |-- webpack.base.conf.js // webpack基礎(chǔ)配置 | |-- webpack.dev.conf.js // webpack開(kāi)發(fā)環(huán)境配置 | |-- webpack.prod.conf.js // webpack生產(chǎn)環(huán)境配置 |-- config // 項(xiàng)目開(kāi)發(fā)環(huán)境配置 | |-- dev.env.js // 開(kāi)發(fā)環(huán)境變量 | |-- index.js // 項(xiàng)目一些配置變量 | |-- prod.env.js // 生產(chǎn)環(huán)境變量 | |-- test.env.js // 測(cè)試環(huán)境變量 |-- src // 源碼目錄 | |-- components // vue公共組件 | |-- store // vuex的狀態(tài)管理 | |-- App.vue // 頁(yè)面入口文件 | |-- main.js // 程序入口文件,加載各種公共組件 |-- static // 靜態(tài)文件,比如一些圖片,json數(shù)據(jù)等 | |-- data // 群聊分析得到的數(shù)據(jù)用于數(shù)據(jù)可視化 |-- .babelrc // ES6語(yǔ)法編譯配置 |-- .editorconfig // 定義代碼格式 |-- .gitignore // git上傳需要忽略的文件格式 |-- README.md // 項(xiàng)目說(shuō)明 |-- favicon.ico |-- index.html // 入口頁(yè)面 |-- package.json // 項(xiàng)目基本信息
package.json文件
package.json文件是項(xiàng)目根目錄下的一個(gè)文件,定義該項(xiàng)目開(kāi)發(fā)所需要的各種模塊以及一些項(xiàng)目配置信息(如項(xiàng)目名稱(chēng)、版本、描述、作者等)。
自定義npm相關(guān)命令
在package.json文件里有一個(gè)scripts字段。
"scripts": { "dev": "node build/dev-server.js", "build": "node build/build.js" }
在開(kāi)發(fā)環(huán)境下,在命令行中運(yùn)行npm run dev就相當(dāng)于在執(zhí)行node build/dev-server.js。所以script字段是用來(lái)指定npm相關(guān)命令的縮寫(xiě)的。
dependencies字段和devDependencies字段
dependencies字段指定了項(xiàng)目運(yùn)行時(shí)所依賴(lài)的模塊
devDependencies字段指定了項(xiàng)目開(kāi)發(fā)時(shí)所依賴(lài)的模塊(項(xiàng)目環(huán)境依賴(lài))
在命令行中運(yùn)行npm install命令,會(huì)自動(dòng)安裝dependencies和devDependencies字段中的模塊。
webpack配置相關(guān)
詳情在webpack相關(guān)博客
dev-server.js
... ... // http-proxy可以實(shí)現(xiàn)轉(zhuǎn)發(fā)所有請(qǐng)求代理到后端真實(shí)API地址,以實(shí)現(xiàn)前后端開(kāi)發(fā)完全分離 // 在config/index.js中可以對(duì)proxyTable想進(jìn)行配置 var proxyMiddleware = require('http-proxy-middleware') ... ... // 熱加載要使用webpack-dev-middleware在沒(méi)有webpack-dev-server的時(shí)候進(jìn)行熱加載 var hotMiddleware = require('webpack-hot-middleware')(compiler) // 當(dāng)html-webpack-plugin模板改變是強(qiáng)制進(jìn)行頁(yè)面重新加載 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: { // 各種不同類(lèi)型文件加載器配置 loaders: { ... ... // js文件用babel轉(zhuǎn)碼 { test: /\.js$/, loader: 'babel', include: projectRoot, // 哪些文件不需要轉(zhuǎn)碼 exclude: /node_modules/ }, ... ... } }, // vue文件一些相關(guān)配置 vue: {} }
check-version.js
這個(gè)文件主要是用來(lái)檢測(cè)當(dāng)前環(huán)境中的node和npm版本和我們需要的是否一致的。
// 加載語(yǔ)義化版本測(cè)試庫(kù) var semver = require('semver') // 定制控制臺(tái)日志的輸入樣式 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版本需求所組成的數(shù)組 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) ) } } ... }
.babelrc
Babel解釋器的配置文件,存放在根目錄下。Babel是一個(gè)轉(zhuǎn)碼器,項(xiàng)目里需要用它將ES6代碼轉(zhuǎn)為ES5代碼
// 設(shè)定轉(zhuǎn)碼規(guī)則 "presets": ["es2015", "stage-2"], // 轉(zhuǎn)碼的一些插件 "plugins": ["transform-runtime"], "comments": false
.editorconfig
該文件定義項(xiàng)目的編碼規(guī)范,編輯器的行為會(huì)與.editorconfig 文件中定義的一致,并且其優(yōu)先級(jí)比編輯器自身的設(shè)置要高,這在多人合作開(kāi)發(fā)項(xiàng)目時(shí)十分有用而且必要。
root = true [*] // 對(duì)所有文件應(yīng)用下面的規(guī)則 charset = utf-8 // 編碼規(guī)則用utf-8 indent_style = space // 縮進(jìn)用空格 indent_size = 2 // 縮進(jìn)數(shù)量為2個(gè)空格 end_of_line = lf // 換行符格式 insert_final_newline = true // 是否在文件的最后插入一個(gè)空行 trim_trailing_whitespace = true // 是否刪除行尾的空格
感謝各位的閱讀!關(guān)于“vue腳手架vue-cli怎么用”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。