vue-cli基礎配置以及webpack配置修改

腳手架

腳手架幫咱們幫咱們把 webpack 等相關的配置都處理好，咱們只須要基於腳手架快速構建一個項目便可(項目中必定包含webpack的相關配置)

vue腳手架 vue-cli

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

1.安裝腳手架(通常安裝在全局)

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

安裝成功後，全局環境會生成 $vue 的可執行命令，咱們能夠基於 $vue --version 來查看版本號，看是否安裝成功

2.建立工程化項目

$vue create [項目名稱](要遵循npm包的名稱規範:數字或者小寫字母)
複製代碼

第一項是我以前建立保存的配置，若是是第一次建立就有第二項和第三項

• default (babel,eslint) ：選擇默認配置項（後期本身安裝須要的模塊和進行配置）
• Manually select features ：手動選擇配置項

若是選擇默認這篇文章就沒有意義了，咱們選擇手動選擇配置項

這裏選擇腳手架裏的webpack配置，空格鍵是選擇，我選擇了以上這些項，若是有須要自行添減

• babel（babel-preset-vue-app）：babel-preset-env最新的ECMAScript功能、轉換Vue JSX轉換generator和async/await等
• Router ：Vue官方的路由管理器
• Vuex ：Vue中實現公共狀態管理的插件 (處理組件之間的信息通訊)
• Css Pre-processors ：CSS 預處理器（SASS/LESS/Stylus）
• Linter / Formatter ：eslint 語法檢測
• Unit Testing ：單元測試
• E2E Testing ：端到端測試

是否使用路由器的歷史模式，選擇Y；選擇哪一個CSS 預處理語言的配置規則，我用的是less根據本身須要選擇

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

選擇第一個能夠保存配置方便下次使用

• 第一個選項是把配置信息放到一個單獨的文件
• 第二項是放到package.json裏

建立後的項目目錄

• src ：項目開發源文件
  • main.js ：打包編譯的入口文件
  • App.vue ：項目頁面的入口文件
  • components ：存放當前項目的公共組件
    • xxx.vue
  • assets ：通常存放項目中須要引入的靜態資源文件
    • xxx.png
    • xxx.css
• public
  • index.html ：當前項目的主頁面，咱們最後把全部在src中寫的內容，經過webpack、vue編譯渲染，最後呈如今index.html中的#app容器中
  • xxx.xx ：有些時候咱們的某些資源可能要單獨在index.html就引用了，將它放在此文件夾下，可是開發時除了這樣的資源，其他的都建議放在src文件夾中

開發模式下咱們基於下面這個命令，啓動一個本地服務，把基於webpack編譯後的內容預覽

$npm run serve 或者 $yarn serve
複製代碼

生產模式下，把寫好的內容進行編譯打包，最後部署到服務器上

$npm run build 或者 $yarn build
複製代碼

vue-cli的其餘命令

$vue inspect 查看當前項目默認的webpack配置信息
$vue add [plugin] 在當前項目中安裝插件
複製代碼

$vue ui ：以圖形化界面建立和管理項目

會打開一個瀏覽器窗口，並以圖形化界面將你引導至項目建立的流程

$vue create --help ：能夠查看vue中的命令

vue-cli的一點深刻

建立項目後，默認的配置中已經把，例如：less/sass 等規則配好，若是咱們的項目中須要使用less等，無需配置規則，只須要安裝對應的模塊和加載器便可

$yarn add less less-loader -D

<script>
    impoer './xxx/xxx.xx' //=>導入須要的模塊
</script>

<style lang="less">
    ...../
</style>
複製代碼

修改默認的webpack配置

• 須要在根目錄中建立 vue.config.js 文件，在這個文件中修改相關配置，下面代碼就是修改webpack的相關配置

module.exports = {
	//=>process.env.NODE_ENV：環境變量中存儲的是開發環境仍是生產環境
	publicPath: process.env.NODE_ENV === 'production' ? 'http://www.xxx.cn/' : '/',
	//=>outputDir
	//=>自定義目錄名稱，把生成的JS/CSS/圖片等靜態資源放置到這個目錄中
	assetsDir: 'assets',
	//=>關閉生產環境下的資源映射（生產環境下不在建立xxx.js.map文件）
	productionSourceMap: false,
	//=>設置一些webpack配置項，用這些配置項和默認的配置項合併
	configureWebpack: {
		plugins: []
	},
	//=>直接去修改內置的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
    }
    
複製代碼

最後

• 有什麼不正確的地方歡迎指出
• 師承——周嘯天