摘要:前言本文系統的梳理了搭建項目的常見用法,目的在于讓你快速掌握獨立搭建項目的能力。思維導圖接下來,我們根據思維導圖,一步步來解釋和實現我們的目標。這確保了最終包里數量的最小化。但是如果其中一個依賴需要特殊的,默認情況下無法將其檢測出來。
前言
本文系統的梳理了vue-cli3搭建項目的常見用法,目的在于讓你快速掌握獨立搭建vue項目的能力。你將會了解如下知識點:
如何安裝項目插件
添加瀏覽器支持
如何配置scss/stylus共享全局變量
如何整合elementUI等第三方框架并實現按需引入
配置單/多頁面
如何配置自定義環境變量
如何在vue.config.js定制自己的webpack
vue項目部署
說明本文末尾會給出一個以上提到的所有功能的一個配置文件,可供大家學習參考。
思維導圖
接下來,我們根據思維導圖,一步步來解釋和實現我們的目標。
vue add @vue/cli-plugin-eslint # 或 vue add xjFile
vue add 的設計意圖是為了安裝和調用 Vue CLI 插件。對于普通的 npm 包而言,我們仍然可以(根據所選的 npm 包)使用包管理器。最后可以在vue.config.js做webpack自定義配置2.添加瀏覽器支持
browserslist
我們可以通過package.json 文件里的 browserslist字段或一個多帶帶的 .browserslistrc 文件來指定項目的目標瀏覽器的范圍。這個值會被 @babel/preset-env 和 Autoprefixer 用來確定需要轉譯的 JavaScript 特性和需要添加的 CSS 瀏覽器前綴
例如:
// .browserslistrc > 1% last 2 versions
想要獲取更多browserslist,可移步browserslist
Polyfill
默認情況下,cli會把 useBuiltIns: "usage" 傳遞給 @babel/preset-env,這樣它會根據源代碼中出現的語言特性自動檢測需要的 polyfill。這確保了最終包里 polyfill 數量的最小化。但是如果其中一個依賴需要特殊的 polyfill,默認情況下 Babel 無法將其檢測出來。我們可以通過如下三種方式解決此類問題:
將依賴添加到 vue.config.js 中的 transpileDependencies 選項
// vue.config.js module.exports = { // 默認情況下 babel-loader 會忽略所有 node_modules 中的文件。如果你想要通過 Babel 顯式轉譯一個依賴,可以在這個選項中列出來 transpileDependencies: ["glob"] }
可以使用 @vue/babel-preset-app 的 polyfills 選項預包含所需要的 polyfill
// babel.config.js module.exports = { presets: [ ["@vue/app", { polyfills: [ "es6.promise", "es6.symbol" ] }] ] }
使用 useBuiltIns: "entry" 然后在入口文件添加 import "@babel/polyfill",這種方式的問題就是會增加包的大小
3.配置scss/stylus共享全局變量對與scss,可以使用如下方式開啟:
// vue.config.js module.exports = { css: { loaderOptions: { sass: { // 這里假設你有 `src/variables.scss` 文件 data: `@import "~@/variables.scss";` } } } }
對于stylus,本人親測使用如上方式無效,可以通過如下方式實現:
vue add style-resources-loader // vue.config.js const path = require("path") module.exports = { pluginOptions: { "style-resources-loader": { "patterns": [ path.resolve(__dirname, "src/styles/abstracts/*.styl"), ] } } }4.整合eleemntUI等第三方框架并實現按需引入
安裝babel-plugin-component
npm install babel-plugin-component -D
配置babel.config.js
module.exports = { presets: [ "@vue/app", ], plugins: [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] }
此時即可按需引入element組件,優化項目體積了。
5.配置單/多頁面vue-cli默認單頁面結構,我們可以通過配置文件來將項目配置成多頁面:
// vue.config.js const path = require("path") module.exports = { // 單/多頁面 pages: { index: { // page 的入口 entry: "src/home/main.js", // 模板來源 template: "public/index.html", // 在 dist/index.html 的輸出 filename: "index.html", // 當使用 title 選項時, // template 中的 title 標簽需要是6.如何配置自定義環境變量<%= htmlWebpackPlugin.options.title %> title: "Your Web For PC", // 在這個頁面中包含的塊,默認情況下會包含 // 提取出來的通用 chunk 和 vendor chunk。 // chunks: ["chunk-vendors", "chunk-common", "index"] }, // 當使用只有入口的字符串格式時, // 模板會被推導為 `public/subpage.html` // 并且如果找不到的話,就回退到 `public/index.html`。 // 輸出文件名會被推導為 `subpage.html`。 // subpage: "src/subpage/main.js" }, }
你可以替換你的項目根目錄中的下列文件來指定環境變量:
.env # 在所有的環境中被載入 .env.local # 在所有的環境中被載入,但會被 git 忽略 .env.[mode] # 只在指定的模式中被載入 .env.[mode].local # 只在指定的模式中被載入,但會被 git 忽略
如下:
// .env.local APPID=123 VUE_APP_SECRET=secret
如果你想在客戶端側代碼中使用環境變量,變量名因以 VUE_APP_開頭,如下可獲取定義的環境變量:
console.log(process.env.VUE_APP_SECRET)7.如何在vue.config.js定制自己的webpack
我們可以使用cli支持的鏈式調用,或者自定義調用:
// vue-cli內部webpack配置 chainWebpack: config => { // 設置快捷目錄別名 config.resolve.alias.set("utils",resolve("../utils")) // 修改靜態資源打包方式,下例為超過10k才用文件導入的方式,否則為base64.默認為4k // config.module // .rule("images") // .use("url-loader") // .loader("url-loader") // .tap(options => Object.assign(options, { limit: 10240 })) }, // webpack自定義配置 configureWebpack: config => { if (process.env.NODE_ENV === "production") { // 為生產環境修改配置... } else { // 為開發環境修改配置... } }7.vue項目部署
這里我們使用shell腳本部署,當然大家也可以使用自己熟悉的方式部署:
#!/usr/bin/env sh # 當發生錯誤時中止腳本 set -e # 構建 npm run build # cd 到構建輸出的目錄 cd dist git init git add -A git commit -m "deploy" git push -f git@bitbucket.org:最后,上一張相對完整的配置清單:/ .bitbucket.io.git master cd -
// vue.config.js // 自定義vue配置 const path = require("path"); const resolve = dir => path.join(__dirname, dir); // mock數據 const mockData = require("./mock/test.json"); module.exports = { // 基本路徑 publicPath: "./", // 輸出文件目錄 // outputDir: "dist", // eslint-loader 是否在保存的時候檢查 // lintOnSave: true, // 單/多頁面 pages: { index: { // page 的入口 entry: "src/main.js", // 模板來源 template: "public/index.html", // 在 dist/index.html 的輸出 filename: "index.html", // 當使用 title 選項時, // template 中的 title 標簽需要是<%= htmlWebpackPlugin.options.title %> title: "OpenCoder For PC", // 在這個頁面中包含的塊,默認情況下會包含 // 提取出來的通用 chunk 和 vendor chunk。 // chunks: ["chunk-vendors", "chunk-common", "index"] }, // 當使用只有入口的字符串格式時, // 模板會被推導為 `public/subpage.html` // 并且如果找不到的話,就回退到 `public/index.html`。 // 輸出文件名會被推導為 `subpage.html`。 // subpage: "src/subpage/main.js" }, // css相關配置 css: { // 是否使用css分離插件 ExtractTextPlugin extract: true, // 開啟 CSS source maps? sourceMap: false, // css預設器配置項 loaderOptions: { // stylus: { // // @/ 是 src/ 的別名 // // 所以這里假設你有 `src/variables.stylus` 這個文件, 不過目前測試無效 // data: `@import "~@/style/variables.styl";` // } }, // 啟用 CSS modules for all css / pre-processor files. modules: false }, pluginOptions: { // 共享變量 "style-resources-loader": { preProcessor: "stylus", patterns: [ //這個是加上自己的路徑, //注意:試過不能使用別名路徑 resolve("src/style/variables.styl"), ] } }, devServer: { // 端口 port: 3000, // 配置代理 proxy: { "^/api": { target: "http://localhost:8081", ws: true, changeOrigin: true }, "^/data": { target: "http://localhost:3000" } }, // mock before(app){ app.get("/api/getUser",(req,res,next)=>{ res.json(mockData); }) } }, // vue-cli內部webpack配置 chainWebpack: config => { // 設置快捷目錄別名 config.resolve.alias.set("utils",resolve("../utils")) // 修改靜態資源打包方式,下例為超過10k才用文件導入的方式,否則為base64.默認為4k // config.module // .rule("images") // .use("url-loader") // .loader("url-loader") // .tap(options => Object.assign(options, { limit: 10240 })) }, // webpack配置 configureWebpack: config => { if (process.env.NODE_ENV === "production") { // 為生產環境修改配置... } else { // 為開發環境修改配置... } } } // babel.config.js module.exports = { presets: [ "@vue/app", ], plugins: [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] } // .browserslistrc > 1% last 2 versions // package.json { "name": "pc", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "build:serve": "serve -s dist", "lint": "vue-cli-service lint", "test:unit": "vue-cli-service test:unit" }, "dependencies": { "clipboard": "^2.0.4", "core-js": "^2.6.5", "element-ui": "^2.9.1", "register-service-worker": "^1.6.2", "serve": "^11.0.2", "vue": "^2.6.10", "vue-router": "^3.0.3", "vuex": "^3.0.1" }, "devDependencies": { "@vue/cli-plugin-babel": "^3.8.0", "@vue/cli-plugin-eslint": "^3.8.0", "@vue/cli-plugin-pwa": "^3.8.0", "@vue/cli-plugin-unit-mocha": "^3.8.0", "@vue/cli-service": "^3.8.0", "@vue/test-utils": "1.0.0-beta.29", "babel-eslint": "^10.0.1", "babel-plugin-component": "^1.1.1", "chai": "^4.1.2", "eslint": "^5.16.0", "eslint-plugin-vue": "^5.0.0", "style-resources-loader": "^1.2.1", "stylus": "^0.54.5", "stylus-loader": "^3.0.2", "vue-cli-plugin-style-resources-loader": "^0.1.3", "vue-template-compiler": "^2.6.10" } }
本文梳理了一個最基本的cli3項目配置流程,我們可以根據這個思維導圖,去搭建自己的項目。
本文參考vue-cli官網
如想獲取思維導圖高清源文件,請掃描下方公眾號:
在公眾號點擊進群,可以加入vue學習小組,一起學習前端技術
歡迎關注后續推文
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/105779.html
摘要:五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語。葉上初陽乾宿雨,水面清圓,一一風荷舉。家住吳門,久作長安旅。五月漁郎相憶否。小楫輕舟,夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請::點擊::集web前端最近很火的vue2框架資源;定時更新,歡迎 Star 一下。 蘇...
摘要:五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語。葉上初陽乾宿雨,水面清圓,一一風荷舉。家住吳門,久作長安旅。五月漁郎相憶否。小楫輕舟,夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請::點擊::集web前端最近很火的vue2框架資源;定時更新,歡迎 Star 一下。 蘇...
閱讀 370·2023-04-25 16:38
閱讀 1482·2021-09-26 09:46
閱讀 3326·2021-09-08 09:35
閱讀 2779·2019-08-30 12:54
閱讀 3249·2019-08-29 17:06
閱讀 1017·2019-08-29 14:06
閱讀 3344·2019-08-29 13:00
閱讀 3466·2019-08-28 17:53