前端【常用的依赖下载】【打包相关的配置项】【项目打包后本地查看配置】【去掉打包后js的map文件】【生成打包报告】【替换组件js为cdn导入方式】【ES6新语法】

常用依赖

vue脚手架

1 npm i  @vue/cli  -g    或    yarn global add @vue/cli

 vue/cli-service

1 npm i -D @vue/cli-service

axios

1 npm install axios   或  cdn方式：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

vuex

1 npm install vuex@next --save

router

1 npm install vue-router

 normalize.css，清除浏览器默认样式的插件，比自己手写方便

1 npm i normalize.css

1、打包后会生成dist目录，里面的index.html双击打开是空白的，需要部署到服务器上才能看到项目内容，此时可以通过vue.config.js中配置一个参数，这样本地打包完就可以看到效果

　　vue.config.js

1 const { defineConfig } = require('@vue/cli-service')
2 module.exports = defineConfig({
3   transpileDependencies: true,
4   // 允许打包的结果，以文件方式访问（允许双击打开）
5   publicPath: './'
6 })

2、打包之后dist目录下，js目录会存放项目用到的js文件，但是会发现存在很多xxx.map的文件(用于映射js文件与原始js的内容)，想要打包的时候去掉这些文件，也在vue.config.js中配置

1 const { defineConfig } = require('@vue/cli-service')
2 module.exports = defineConfig({
3   transpileDependencies: true,
4   // 允许打包的结果，以文件方式访问（允许双击打开）
5   publicPath: './',
6   // 去掉map文件
7   productionSourceMap: false,
8 })

 3、分析项目的打包哪些文件占用大小

　　在package.json文件中，执行脚本中添加--report，例如下面的配置，执行pnpm run build打包的时候，就会在项目目录下生成report.html报告文件

 1 {
 2   "name": "mj-pc",
 3   "version": "0.1.0",
 4   "private": true,
 5   "scripts": {
 6     "serve": "vue-cli-service serve",
 7     "build": "vue-cli-service build --report",
 8     "lint": "vue-cli-service lint"
 9   },
10   "dependencies": {
11     "axios": "^1.4.0",
12     "core-js": "^3.8.3",
13     "echarts": "^5.4.3",
14     "element-ui": "^2.15.13",
15     "vue": "^2.6.14",
16     "vue-quill-editor": "^3.0.6",
17     "vue-router": "^3.5.1",
18     "vuex": "^3.6.2"
19   },
20   "devDependencies": {
21     "@babel/core": "^7.12.16",
22     "@babel/eslint-parser": "^7.12.16",
23     "@vue/cli-plugin-babel": "~5.0.0",
24     "@vue/cli-plugin-eslint": "~5.0.0",
25     "@vue/cli-plugin-router": "~5.0.0",
26     "@vue/cli-plugin-vuex": "~5.0.0",
27     "@vue/cli-service": "~5.0.0",
28     "@vue/eslint-config-standard": "^6.1.0",
29     "eslint": "^7.32.0",
30     "eslint-plugin-import": "^2.25.3",
31     "eslint-plugin-node": "^11.1.0",
32     "eslint-plugin-promise": "^5.1.0",
33     "eslint-plugin-vue": "^8.0.3",
34     "sass": "^1.32.7",
35     "sass-loader": "^12.0.0",
36     "vue-template-compiler": "^2.6.14"
37   }
38 }

4、由于某些包打包之后比较大，不将这些组件打包到项目中，使用对应的CDN导入这些组件

　　1、去哪里找第三方包：

　　　　https://www.jsdelivr.com/     -->      <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>    -->  网站有对应搜索框搜索组件

　　　　https://unpkg.com/               -->     引入方式：unpkg.com/:package@:version/:file     -->  网站搜索方式,   https://unpkg.com/axios 回车    (网站域名后拼接要查找的组件名)　　　　

　　2、例如echarts查找地址：https://www.jsdelivr.com/package/npm/echarts

　　3、替换项目中的引入

　　　　例如之前导入echarts

1 import * as echarts from 'echarts'

　　　　在入口文件public/index.html文件中，使用CDN导入

1 <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>

　　4、项目中大部分能换成cdn的全都换成了cdn方式

 1 <!DOCTYPE html>
 2 <html lang="">
 3   <head>
 4     <meta charset="utf-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8     <title><%= htmlWebpackPlugin.options.title %></title>
 9     <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.9/lib/theme-chalk/index.css">
10     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.core.css">
11     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.snow.css">
12     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.bubble.css">
13   </head>
14   <body>
15     <noscript>
16       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
17     </noscript>
18     <div id="app"></div>
19     <!-- built files will be auto injected -->
20     <!-- 引入网络当中的echarts -->
22     <script src="https://unpkg.com/vue@2.6/dist/vue.min.js"></script>
23     <script src="https://unpkg.com/vue-router@3.5.4/dist/vue-router.js"></script>
24     <script src="https://unpkg.com/axios@0.27.2/dist/axios.min.js"></script>
25     <script src="https://unpkg.com/vuex@3.6.2/dist/vuex.js"></script>
26     <script src="https://unpkg.com/element-ui@2.15.9/lib/index.js"></script>
27     <script src="https://unpkg.com/echarts@5.4.3/dist/echarts.js"></script>
28     <script src="https://unpkg.com/quill@1.3.7/dist/quill.js"></script>
29     <script src="https://unpkg.com/vue-quill-editor@3.0.6/dist/vue-quill-editor.js"></script>
30   </body>
31 </html>

　　5、当使用了网络资源引入方式，则项目打包的时候要排除这些组件，不打包这些组件，需要在vue.config.js中配置排除这些组件

 1 const { defineConfig } = require('@vue/cli-service')
 2 module.exports = defineConfig({
 3   transpileDependencies: true,
 4   // 允许打包的结果，以文件方式访问（允许双击打开）
 5   publicPath: './',
 6   // 去掉map文件
 7   productionSourceMap: false,
 8   // 打包时，排除哪些组件
 9   configureWebpack: {
10     externals: {
11       // 键(包名): '引入echarts.js后，window中多了什么'
12       axios: 'axios',
13       vue: 'Vue',
14       'vue-router': 'VueRouter',
15       vuex: 'Vuex',
16       echarts: 'echarts',
17       'element-ui': 'ELEMENT',
18       'vue-quill-editor': 'VueQuillEditor'
19     }
20   }
21 })

 

5、当要调用form的resetFields()方法，先判断该表单是否存在然后再调用

　　当使用v-if和v-else的时候，需要根据这个组件是否存在来处理一些事情

1 <div v-if="drawerType === 'view'" class="article-preview">
2   <h5>{{ form.stem }}</h5>
3   <div v-html="form.content"></div>
4 </div>
5 <el-form v-else :model="form" :rules="rules" ref="form" label-width="80px">
6   ...
7 </el-form>

　　表单存在则调用重置方法。

1 handleClose () {
2   // ?. 是新语法，ES6语法
3   // 前面的表单如果能够找到，不是undefined，则调用后面的 resetFields 方法
4   this.$refs.form?.resetFields()
5   this.drawer = false
6 },

 

posted @ 2024-04-09 12:24  为你编程  阅读(69)  评论(0)  编辑  收藏  举报