腳手架

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

vue腳手架  vue-cli

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

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

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

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

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

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

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

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

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

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

• 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 語法檢測
• Unit Testing ：單元測試
• E2E Testing ：端到端測試

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

選擇自動化代碼格式化檢測，我用的 vscode 選的 ESLint+Prettier

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

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

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

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

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

public

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

開發(fā)模式下我們基于下面這個命令，啟動一個本地服務(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)前項目默認(rèn)的webpack配置信息
$vue add [plugin] 在當(dāng)前項目中安裝插件

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

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

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

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

創(chuàng)建項目后，默認(rèn)的配置中已經(jīng)把，例如：less/sass 等規(guī)則配好，如果我們的項目中需要使用less等，無需配置規(guī)則，只需要安裝對應(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 文件，在這個文件中修改相關(guān)配置，下面代碼就是修改webpack的相關(guān)配置

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

總結(jié)

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

最新評論