vue腳手架vue-cli的學習使用教程
vue-cli的模板
- vue-cli的腳手架項目模板有webpack-simple 和 webpack
- 兩種的區(qū)別在于webpack-simple 沒有包括Eslint 檢查等功能
vue-cli的項目結構
. |-- build // 項目構建(webpack)相關代碼 | |-- build.js // 生產(chǎn)環(huán)境構建代碼 | |-- check-version.js // 檢查node、npm等版本 | |-- dev-client.js // 熱重載相關 | |-- dev-server.js // 構建本地服務器 | |-- utils.js // 構建工具相關 | |-- webpack.base.conf.js // webpack基礎配置 | |-- webpack.dev.conf.js // webpack開發(fā)環(huán)境配置 | |-- webpack.prod.conf.js // webpack生產(chǎn)環(huán)境配置 |-- config // 項目開發(fā)環(huán)境配置 | |-- dev.env.js // 開發(fā)環(huán)境變量 | |-- index.js // 項目一些配置變量 | |-- prod.env.js // 生產(chǎn)環(huán)境變量 | |-- test.env.js // 測試環(huán)境變量 |-- src // 源碼目錄 | |-- components // vue公共組件 | |-- store // vuex的狀態(tài)管理 | |-- App.vue // 頁面入口文件 | |-- main.js // 程序入口文件,加載各種公共組件 |-- static // 靜態(tài)文件,比如一些圖片,json數(shù)據(jù)等 | |-- data // 群聊分析得到的數(shù)據(jù)用于數(shù)據(jù)可視化 |-- .babelrc // ES6語法編譯配置 |-- .editorconfig // 定義代碼格式 |-- .gitignore // git上傳需要忽略的文件格式 |-- README.md // 項目說明 |-- favicon.ico |-- index.html // 入口頁面 |-- package.json // 項目基本信息
package.json文件
package.json文件是項目根目錄下的一個文件,定義該項目開發(fā)所需要的各種模塊以及一些項目配置信息(如項目名稱、版本、描述、作者等)。
自定義npm相關命令
在package.json文件里有一個scripts字段。
"scripts": { "dev": "node build/dev-server.js", "build": "node build/build.js" }
在開發(fā)環(huán)境下,在命令行中運行npm run dev就相當于在執(zhí)行node build/dev-server.js。所以script字段是用來指定npm相關命令的縮寫的。
dependencies字段和devDependencies字段
- dependencies字段指定了項目運行時所依賴的模塊
- devDependencies字段指定了項目開發(fā)時所依賴的模塊(項目環(huán)境依賴)
- 在命令行中運行npm install命令,會自動安裝dependencies和devDependencies字段中的模塊。
webpack配置相關
詳情在webpack相關博客
dev-server.js
... ... // http-proxy可以實現(xiàn)轉(zhuǎn)發(fā)所有請求代理到后端真實API地址,以實現(xiàn)前后端開發(fā)完全分離 // 在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轉(zhuǎn)碼 { test: /\.js$/, loader: 'babel', include: projectRoot, // 哪些文件不需要轉(zhuǎn)碼 exclude: /node_modules/ }, ... ... } }, // vue文件一些相關配置 vue: {} }
check-version.js
這個文件主要是用來檢測當前環(huán)境中的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版本需求所組成的數(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是一個轉(zhuǎn)碼器,項目里需要用它將ES6代碼轉(zhuǎn)為ES5代碼
// 設定轉(zhuǎn)碼規(guī)則 "presets": ["es2015", "stage-2"], // 轉(zhuǎn)碼的一些插件 "plugins": ["transform-runtime"], "comments": false
.editorconfig
該文件定義項目的編碼規(guī)范,編輯器的行為會與.editorconfig 文件中定義的一致,并且其優(yōu)先級比編輯器自身的設置要高,這在多人合作開發(fā)項目時十分有用而且必要。
root = true [*] // 對所有文件應用下面的規(guī)則 charset = utf-8 // 編碼規(guī)則用utf-8 indent_style = space // 縮進用空格 indent_size = 2 // 縮進數(shù)量為2個空格 end_of_line = lf // 換行符格式 insert_final_newline = true // 是否在文件的最后插入一個空行 trim_trailing_whitespace = true // 是否刪除行尾的空格
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
vue3+TypeScript+vue-router的使用方法
本文詳細講解了vue3+TypeScript+vue-router的使用方法,文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-01-01