九九色综合_性69交片免费看_亚洲一区二区三区久久精品_精品一久久_欧美一级黄视频_污免费网站

Vue新建項目+git托管+初始配置+項目打包優(yōu)化

2024-1-4 前端達人

1、已全局安裝vue-cli和nodejs（第一次需要）

2、利用Vue-cli創(chuàng)建項目

打開項目所在文件夾
vue create ‘項目名’
選擇手動配置

babel：js編輯器
typeScript：超集js【需要指定數(shù)據(jù)類型】
PWA：離線可用
Linter/Formatter：約束代碼規(guī)范，配合eslint
unit/e2e testing：測試
在這里插入圖片描述

3、git遠(yuǎn)程倉庫初始化（創(chuàng)建并添加公鑰，配一次即可）

4、本地項目托管

新建倉庫，給倉庫命名即可，無任何勾選
第二次新建倉庫，不需要再git全局設(shè)置
已經(jīng)創(chuàng)建了項目，進入vscode終端（管理員）（or cmd進入項目路徑）
git init
執(zhí)行橙色代碼（第一句表示遠(yuǎn)程倉庫地址，第二句表示首次推送主分支到云端倉庫，origin為云倉庫別名）

在這里插入圖片描述

5、項目文件夾

node_modules:放置項目依賴的地方
public:一般放置一些共用的靜態(tài)資源，包括頁簽圖標(biāo)、index.html，打包上線的時候，public文件夾里面資源原封不動打包到dist文件夾里面；<%= BASE_URL %>是public所在路徑，使用絕對路徑

腳手架目錄public和assets區(qū)別：參考鏈接
在這里插入圖片描述

src：程序員源代碼文件夾

assets文件夾：經(jīng)常放置一些靜態(tài)資源（圖片），assets文件夾里面資源webpack會進行打包為一個模塊（js文件夾里面）
components文件夾:一般放置非路由組件（或者項目共用的組件）
App.vue 唯一的根組件
main.js 入口文件【程序最先執(zhí)行的文件】
babel.config.js:babel配置文件【翻譯官：如ES6翻譯成ES5，兼容好】
package.json：應(yīng)用包配置文件；看到項目描述、項目依賴、項目運行指令【項目信息記錄：‘項目身份證’】
package-lock.json: 包版本控制文件
.gitignore: git版本管制忽略的配置
README.md:項目說明文件

補充：通過 vue.config.js 可以修改 webpack 的默認(rèn)配置
在這里插入圖片描述

6、初始配置

a. 瀏覽器自動打開html，vue-cli-service serve --open

在package.json文件中
        "scripts": {
         "serve": "vue-cli-service serve --open",
          "build": "vue-cli-service build",
          "lint": "vue-cli-service lint"
        },

b.關(guān)閉eslint校驗工具

創(chuàng)建vue.config.js文件：需要對外暴露
module.exports = {
   lintOnSave:false,
}

c. src文件夾的別名的設(shè)置【@表示src文件夾，@在"node_modules","dist"不能用】

創(chuàng)建jsconfig.json文件
{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": [
                "src/*"
            ]
        }
    },
    "exclude": [
        "node_modules",
        "dist"
    ]
}

7、后臺項目的環(huán)境安裝配置；參考黑馬項目

MySQL數(shù)據(jù)庫；
Node.js環(huán)境【因為后臺接口依賴Node.js】 Nodejs安裝及環(huán)境配置鏈接
安裝API依賴包；
postman測試后臺項目接口：【安裝與使用見連接】
https://blog.csdn.net/m0_61843874/article/details/123324727
https://www.bilibili.com/video/BV1hP4y177gS/?spm_id_from=333.337.search-card.all.click&vd_source=c4d71976fd97f04545873bc4552dfb71
選擇好請求方式；輸入URL；body——x-www-form-urlencoded（普通形式輸入請求參數(shù)）

8、清除初始靜態(tài)樣式，梳理app.vue根組件

9、清除初始路由配置；清除初始的路由組件和非路由組件

新建routes.js放路由規(guī)則在這里插入圖片描述

10、生成項目報告

npm run build  -- --report

11、項目優(yōu)化

Vue項目在執(zhí)行build命令期間中移除所有console.log 鏈接
通過 vue.config.js 可以修改 webpack 的默認(rèn)配置
為開發(fā)模式與發(fā)布模式指定不同的打包入口

3.1 打包入口的修改，可以通過 configureWebpack和 chainWebpack節(jié)點來實現(xiàn)：

3.2 通過 chainWebpack 自定義打包入口
新建./src/main-prod.js和./src/main-dev.js文件；在vue.config.js進行如下配置

chainWebpack: config => {
    config.when(process.env.NODE_ENV === 'production',config=>{
      config.entry('app').clear().add('./src/main-prod.js')
    })
    config.when(process.env.NODE_ENV === 'development',config=>{
      config.entry('app').clear().add('./src/main-dev.js')
    })
  }

通過externals 加載外部 CDN 資源，對于externals中的第三方依賴包，在用到依賴包的時候，會找window全局對象上查找并直接使用現(xiàn)成的對象，能夠讓打包的項目體積更小；只有production模式才有必要配置externals節(jié)點

第一步：vue.config.js——>配置externals節(jié)點
在這里插入圖片描述

//配置后的vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false,
  // 通過 chainWebpack 為開發(fā)模式與發(fā)布模式指定不同的打包入口
  chainWebpack: config => {
    // 發(fā)布模式
    config.when(process.env.NODE_ENV === 'production',config=>{
      config.entry('app').clear().add('./src/main-prod.js')

   <span class="token comment">// 通過externals 加載外部 CDN 資源</span>
  config<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">'externals'</span><span class="token punctuation">,</span><span class="token punctuation">{</span>
    <span class="token literal-property property">vpe</span> <span class="token operator">:</span> <span class="token string">' Vue '</span><span class="token punctuation">,</span>
    <span class="token string-property property">'vue-router'</span><span class="token operator">:</span> <span class="token string">'VueRouter'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">axios</span><span class="token operator">:</span> <span class="token string">'axios'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">lodash</span><span class="token operator">:</span> <span class="token string">'_'</span><span class="token punctuation">,</span> 
    <span class="token literal-property property">echarts</span><span class="token operator">:</span> <span class="token string">'echarts'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">nprogress</span><span class="token operator">:</span><span class="token string">'NProgress'</span><span class="token punctuation">,</span>
    <span class="token string-property property">'vue-quill-editor'</span><span class="token operator">:</span> <span class="token string">'VueQuillEditor'</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

config<span class="token punctuation">.</span><span class="token function">when</span><span class="token punctuation">(</span>process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">NODE_ENV</span> <span class="token operator">===</span> <span class="token string">'development'</span><span class="token punctuation">,</span><span class="token parameter">config</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
  config<span class="token punctuation">.</span><span class="token function">entry</span><span class="token punctuation">(</span><span class="token string">'app'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">clear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'./src/main-dev.js'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

} })

第二步：導(dǎo)入的樣式表也會被導(dǎo)入到輸出文件中，導(dǎo)致體積大；臨時注釋掉main.prod.js中的import的VueQuillEditor樣式表；進行如下配置；【注意版本號】
在這里插入圖片描述
進一步添加js文件的CDN引用：

<!-- 富文本編輯器樣式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.7/quill.core.min.css"/>
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.7/quill.snow.min.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.7/quill.bubble.min.css"/>

<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/vue/2.6.14/vue.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/vue-router/3.5.1/vue-router.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span> <span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/axios/1.3.4/axios.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/lodash.js/4.17.21/lodash.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/echarts/5.4.1/echarts.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 富文本編輯器的 js 文件 <span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/quill/1.3.7/quill.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>

.通過 CDN 優(yōu)化 ElementUl 的打包

第一步：在這里插入圖片描述

<!-- element-ui的樣表文件-->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.13/theme-chalk/index.css" />
    <!-- element-ui的 js 又件-->
    <script src="https://cdn.staticfile.org/element-ui/2.15.13/index.js"></script>

第二步：臨時注釋掉
// 引入自定義插件（封裝element按需引入模塊）
// import element from ‘./plugins/element’

首頁內(nèi)容定制（根據(jù)production模式和development模式定制）
不同的打包環(huán)境下，首頁內(nèi)容可能會有所不同，我們可以通過插件的方式進行定制；
isProd的值為True表示production模式，為FALSE表示development模式；

第一步：對vue.config.js中chainWebpack的屬性進行調(diào)整：

// 通過 chainWebpack 為開發(fā)模式與發(fā)布模式指定不同的打包入口
  chainWebpack: config => {
    // 1、發(fā)布模式
    config.when(process.env.NODE_ENV === 'production',config=>{
      config.entry('app').clear().add('./src/main-prod.js')

   <span class="token comment">// 通過externals 加載外部 CDN 資源</span>
  config<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">'externals'</span><span class="token punctuation">,</span><span class="token punctuation">{</span>
    <span class="token literal-property property">vue</span> <span class="token operator">:</span> <span class="token string">' Vue '</span><span class="token punctuation">,</span>
    <span class="token string-property property">'vue-router'</span><span class="token operator">:</span> <span class="token string">'VueRouter'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">axios</span><span class="token operator">:</span> <span class="token string">'axios'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">lodash</span><span class="token operator">:</span> <span class="token string">'_'</span><span class="token punctuation">,</span> 
    <span class="token literal-property property">echarts</span><span class="token operator">:</span> <span class="token string">'echarts'</span><span class="token punctuation">,</span>
    <span class="token string-property property">'vue-quill-editor'</span><span class="token operator">:</span> <span class="token string">'VueQuillEditor'</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>

  <span class="token comment">// 不同的打包環(huán)境下，首頁內(nèi)容可能會有所不同</span>
  <span class="token comment">// 我們可以通過插件的方式進行定制，根據(jù)isProd的值，來決定如何染頁面結(jié)構(gòu)，發(fā)布模式插件配置如下:</span>
  config<span class="token punctuation">.</span><span class="token function">plugin</span><span class="token punctuation">(</span><span class="token string">'html'</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">tap</span><span class="token punctuation">(</span><span class="token parameter">args</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    args<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>isProd <span class="token operator">=</span> <span class="token boolean">true</span>
    <span class="token keyword">return</span> args
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// 2、開發(fā)模式</span>
config<span class="token punctuation">.</span><span class="token function">when</span><span class="token punctuation">(</span>process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">NODE_ENV</span> <span class="token operator">===</span> <span class="token string">'development'</span><span class="token punctuation">,</span><span class="token parameter">config</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
  config<span class="token punctuation">.</span><span class="token function">entry</span><span class="token punctuation">(</span><span class="token string">'app'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">clear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'./src/main-dev.js'</span><span class="token punctuation">)</span>

  <span class="token comment">// 不同的打包環(huán)境下，首頁內(nèi)容可能會有所不同</span>
  <span class="token comment">// 我們可以通過插件的方式進行定制，根據(jù)isProd的值，來決定如何染頁面結(jié)構(gòu)，開發(fā)模式插件配置如下:</span>
  config<span class="token punctuation">.</span><span class="token function">plugin</span><span class="token punctuation">(</span><span class="token string">'html'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">tap</span><span class="token punctuation">(</span><span class="token parameter">args</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    args<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>isProd <span class="token operator">=</span> <span class="token boolean">false</span>
    <span class="token keyword">return</span> args
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

}

第二步：在public/index.html首頁中，可以根據(jù)isProd的值，來決定如何染頁面結(jié)構(gòu)

<title><%=htmlWebpackPlugin.options.isProd?'':'dev-' %>電商后臺管理系統(tǒng)</title>

<% if(htmlWebpackPlugin.options.isProd){ %>
前面CDN引入的依賴資源（富文本編輯器+elemen-ui）
<% } %>

前面CDN引入的依賴資源（富文本編輯器+elemen-ui），代碼如下：

<link rel="stylesheet" href="/>
<link rel="stylesheet" href=" />
<link rel="stylesheet" href="/>

<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/vue/2.6.14/vue.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/vue-router/3.5.1/vue-router.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/axios/1.3.4/axios.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/lodash.js/4.17.21/lodash.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/echarts/5.4.1/echarts.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
  <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 富文本編輯器的 js 文件 <span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/quill/1.3.7/quill.min.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span> 

<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> element<span class="token operator">-</span>ui的樣表文件<span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>link rel<span class="token operator">=</span><span class="token string">"stylesheet"</span> href<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/element-ui/2.15.13/theme-chalk/index.css"</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> element<span class="token operator">-</span>ui的 js 又件<span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"https://cdn.staticfile.org/element-ui/2.15.13/index.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>

第三步：由于對首頁內(nèi)容根據(jù)production模式和development模式進行了定制，需要將前面注釋掉的富文本編輯器樣式，以及element-ui樣式引入取消注釋，最終項目會根據(jù)不同模式展示首頁

7. 路由懶加載
當(dāng)打包構(gòu)建應(yīng)用時，JavaScript 包會變得非常大，影響頁面加載。如果我們能把不同路由對應(yīng)的組件分割成不同的代碼塊，然后**[當(dāng)路由被訪問的時候才加載對應(yīng)組件**]，這樣就會更加高效。

簡化：
不需要在route.js文件 import UserDetails from ‘./views/UserDetails.vue’；直接路由懶加載
{
name:‘search’, //商品搜索
path:‘/search’,
component:()=>import(‘@/pages/Search’), [路由被訪問才加載組件]

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。