腳手架

腳手架幫我們幫我們把 webpack 等相關(guān)的配置都處理好，我們只需要基于腳手架快速構(gòu)建一個(gè)項(xiàng)目即可(項(xiàng)目中一定包含webpack的相關(guān)配置)

vue腳手架  vue-cli

我們使用任何東西第一步都是安裝

1.安裝腳手架(一般安裝在全局)

//=>用npm安裝
$npm install @vue/cli -g
//=>用yarn安裝
$yarn global add @vue/cli

安裝成功后，全局環(huán)境會(huì)生成 $vue 的可執(zhí)行命令，我們可以基于 $vue --version 來(lái)查看版本號(hào)，看是否安裝成功

2.創(chuàng)建工程化項(xiàng)目

$vue create [項(xiàng)目名稱](要遵循npm包的名稱規(guī)范:數(shù)字或者小寫字母)

第一項(xiàng)是我之前創(chuàng)建保存的配置，如果是第一次創(chuàng)建就有第二項(xiàng)和第三項(xiàng)

• default (babel,eslint) ：選擇默認(rèn)配置項(xiàng)（后期自己安裝需要的模塊和進(jìn)行配置）
• Manually select features ：手動(dòng)選擇配置項(xiàng)

如果選擇默認(rèn)這篇文章就沒有意義了，我們選擇手動(dòng)選擇配置項(xiàng)

這里選擇腳手架里的webpack配置，空格鍵是選擇，我選擇了以上這些項(xiàng)，如果有需要自行添減

• babel（babel-preset-vue-app）：babel-preset-env最新的ECMAScript功能、轉(zhuǎn)換Vue JSX轉(zhuǎn)換generator和async/await等
• Router ：Vue官方的路由管理器
• Vuex ：Vue中實(shí)現(xiàn)公共狀態(tài)管理的插件 (處理組件之間的信息通信)
• Css Pre-processors ：CSS 預(yù)處理器（SASS/LESS/Stylus）
• Linter / Formatter ：eslint 語(yǔ)法檢測(cè)
• Unit Testing ：?jiǎn)卧獪y(cè)試
• E2E Testing ：端到端測(cè)試

是否使用路由器的歷史模式，選擇Y；選擇哪個(gè)CSS 預(yù)處理語(yǔ)言的配置規(guī)則，我用的是less根據(jù)自己需要選擇

選擇自動(dòng)化代碼格式化檢測(cè)，我用的 vscode 選的 ESLint+Prettier

選擇第一個(gè)可以保存配置方便下次使用

• 第一個(gè)選項(xiàng)是把配置信息放到一個(gè)單獨(dú)的文件
• 第二項(xiàng)是放到package.json里

創(chuàng)建后的項(xiàng)目目錄

src ：項(xiàng)目開發(fā)源文件

• main.js ：打包編譯的入口文件
• App.vue ：項(xiàng)目頁(yè)面的入口文件
• components ：存放當(dāng)前項(xiàng)目的公共組件
  • xxx.vue
• assets ：一般存放項(xiàng)目中需要引入的靜態(tài)資源文件
  • xxx.png
  • xxx.css

public

• index.html ：當(dāng)前項(xiàng)目的主頁(yè)面，我們最后把所有在src中寫的內(nèi)容，通過webpack、vue編譯渲染，最后呈現(xiàn)在index.html中的#app容器中
• xxx.xx ：有些時(shí)候我們的某些資源可能要單獨(dú)在index.html就引用了，將它放在此文件夾下，但是開發(fā)時(shí)除了這樣的資源，其余的都建議放在src文件夾中

開發(fā)模式下我們基于下面這個(gè)命令，啟動(dòng)一個(gè)本地服務(wù)，把基于webpack編譯后的內(nèi)容預(yù)覽

$npm run serve 或者 $yarn serve

生產(chǎn)模式下，把寫好的內(nèi)容進(jìn)行編譯打包，最后部署到服務(wù)器上

$npm run build 或者 $yarn build

vue-cli的其他命令

$vue inspect 查看當(dāng)前項(xiàng)目默認(rèn)的webpack配置信息
$vue add [plugin] 在當(dāng)前項(xiàng)目中安裝插件

$vue ui ：以圖形化界面創(chuàng)建和管理項(xiàng)目

會(huì)打開一個(gè)瀏覽器窗口，并以圖形化界面將你引導(dǎo)至項(xiàng)目創(chuàng)建的流程

$vue create --help ：可以查看vue中的命令

vue-cli的一點(diǎn)深入

創(chuàng)建項(xiàng)目后，默認(rèn)的配置中已經(jīng)把，例如：less/sass 等規(guī)則配好，如果我們的項(xiàng)目中需要使用less等，無(wú)需配置規(guī)則，只需要安裝對(duì)應(yīng)的模塊和加載器即可

$yarn add less less-loader -D

<script>
  impoer './xxx/xxx.xx' //=>導(dǎo)入需要的模塊
</script>

<style lang="less">
  ...../
</style>

修改默認(rèn)的webpack配置

需要在根目錄中創(chuàng)建 vue.config.js 文件，在這個(gè)文件中修改相關(guān)配置，下面代碼就是修改webpack的相關(guān)配置

  module.exports = {
	//=>process.env.NODE_ENV：環(huán)境變量中存儲(chǔ)的是開發(fā)環(huán)境還是生產(chǎn)環(huán)境
	publicPath: process.env.NODE_ENV === 'production' ? 'http://www.xxx.cn/' : '/',
	//=>outputDir
	//=>自定義目錄名稱，把生成的JS/CSS/圖片等靜態(tài)資源放置到這個(gè)目錄中
	assetsDir: 'assets',
	//=>關(guān)閉生產(chǎn)環(huán)境下的資源映射（生產(chǎn)環(huán)境下不在創(chuàng)建xxx.js.map文件）
	productionSourceMap: false,
	//=>設(shè)置一些webpack配置項(xiàng)，用這些配置項(xiàng)和默認(rèn)的配置項(xiàng)合并
	configureWebpack: {
		plugins: []
	},
	//=>直接去修改內(nèi)置的webpack配置項(xiàng)
	chainWebpack: config => {
		//=>config:原始配置信息對(duì)象
		config.module
			.rule('images')
			.use('url-loader')
			.loader('url-loader')
			.tap(options => {
				options.limit = 200 * 1024;
				return options;
			});
	},
	//=>修改webpack-dev-server配置（尤其是跨域代理）
	devServer: {
		proxy: {
			//請(qǐng)求地址 /user/add
			//代理地址 http://api.xxx.cn/user/add
			"/": {
				changeOrigin: true,
				target: "http://api.xxx.cn/"
			}
		}
	},
	//=>多余1核cpu時(shí)：?jiǎn)?dòng)并行壓縮
	parallel: require('os').cpus().length > 1
  }
  

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論