• Vue create 之后的空架子完善

    目录

    一、安装组件库

    二、安装图表库

    三、@  符 提示 文件配置

    最初始 package.json 文件 ：

    一、安装组件库

    根据项目需求下载引入具体哪一个组件库

    1、Element UI 组件库 （ 饿了么 组件库 ）

    Element - The world's most popular Vue UI framework

    npm i element-ui -S

    引入 Element  =>

    你可以引入整个 Element ，或是 根据需要 仅 引入部分组件 。

    完整引入 ：（ 不推荐 ）

    1. // 在 main.js 中写入以下内容 ：
    2. import Vue from 'vue';
    3. import ElementUI from 'element-ui'; // 引入 element-ui
    4. import 'element-ui/lib/theme-chalk/index.css'; // 单独引入样式文件
    5. import App from './App.vue';
    6.  
    7. Vue.use(ElementUI); // use 挂载 ElementUI
    8.  
    9. new Vue({
    10.   el: '#app',
    11.   render: h => h(App)
    12. });

    以上代码便完成了 Element 的 完整引入 。需要注意的是 ，样式文件 需要 单独引入 。

     按需引入 ：  （ 推荐 ）

    借助 babel-plugin-component ，我们可以 只引入 需要 的 组件 ，

    以达到 减小 项目体积 的 目的 。

    首先 ，安装 babel-plugin-component ：

    npm install babel-plugin-component -D

    "babel-plugin-component" : "^1.1.1"

    将我们 根目录 下的 babel.config.js 修改 如下 :

    接下来 ，如果你只希望引入部分组件 ，

    比如 Button 和 Select ，那么需要在 main.js 中写入以下内容 ：

    完整组件列表和引入方式（ 完整组件列表以 components.json 为准 ）

    在项目 src 根目录下创建文件夹  plugins  /   element.js

    然后在 main.js 文件内 导入我们刚刚创建好的 组件文件 element.js

    下面让我们先来简单测试一下 : 

    先用简单的按钮来进行测试一下看是否成功 ,

    配置 OK =>  启动服务器 ( npm run serve )

    查看页面效果发现没有问题即可 OK ： 

    这里我们 推荐 的 按需引入 方案 可能会有两个 bug 问题 ：第一个 就是

    ElementUI 按需引入 , 刷新页面 就 显示 Message 消息提示 和 MessageBox 弹框 的 问题

    正常情况下，应该是点击按钮才触发弹窗，而不是现在这样页面刷新的时候就弹出来

    解决方案 ：

    换一种引用方式即可解决

    1. import {
    2.   Message,
    3.   MessageBox,
    4. } from "element-ui";
    5.  
    6. Vue.component(Message.name, Message);
    7. Vue.component(MessageBox.name, MessageBox);

    第二个问题 ：

    这个 报错 是 因为 按需引入的文件内  没有 引入 element ui 中的 Row 引起 的

    在按需引入的 element.js 中

    1. import {
    2.   Row,
    3. } from "element-ui";
    4.  
    5. Vue.use(Row)

    完整代码 ：

    main.js

    1. import Vue from "vue";
    2. import App from "./App.vue";
    3. import router from "./router";
    4. import store from "./store";
    5.  
    6. /* // 完整引入 Element ( 不推荐 )
    7. import ElementUI from "element-ui";
    8. // 单独引入 Element 全部组件样式文件
    9. import "element-ui/lib/theme-chalk/index.css";
    10. Vue.use(ElementUI) */
    11.  
    12. // 引入部分组件
    13. // import { Button, Select } from "element-ui";
    14.  
    15. // Vue.component(Button.name, Button);
    16. // Vue.component(Select.name, Select);
    17. /* 或写为
    18.  * Vue.use(Button)
    19.  * Vue.use(Select)
    20.  */
    21.  
    22. // 引入组件文件 element.js
    23. import "./plugins/element";
    24.  
    25. Vue.config.productionTip = false;
    26.  
    27. new Vue({
    28.   router,
    29.   store,
    30.   render: (h) => h(App),
    31. }).$mount("#app");

    babel.config.js

    1. module.exports = {
    2.   presets: ["@vue/cli-plugin-babel/preset"],
    3.   // Element 按需引入
    4.   plugins: [
    5.     [
    6.       "component",
    7.       {
    8.         libraryName: "element-ui",
    9.         styleLibraryName: "theme-chalk",
    10.       },
    11.     ],
    12.   ],
    13. };

    .babelrc  ( 官方 )

    src  /  plugins  /  element.js

    1. import Vue from "vue";
    2. // 在下面大括号中导入所需 Element-ui 中的组件即可
    3. import {
    4.   Pagination,
    5.   Dialog,
    6.   Autocomplete,
    7.   Dropdown,
    8.   DropdownMenu,
    9.   DropdownItem,
    10.   Menu,
    11.   Submenu,
    12.   MenuItem,
    13.   MenuItemGroup,
    14.   Input,
    15.   InputNumber,
    16.   Radio,
    17.   RadioGroup,
    18.   RadioButton,
    19.   Checkbox,
    20.   CheckboxButton,
    21.   CheckboxGroup,
    22.   Switch,
    23.   Select,
    24.   Option,
    25.   OptionGroup,
    26.   Button,
    27.   ButtonGroup,
    28.   Table,
    29.   TableColumn,
    30.   DatePicker,
    31.   TimeSelect,
    32.   TimePicker,
    33.   Popover,
    34.   Tooltip,
    35.   Breadcrumb,
    36.   BreadcrumbItem,
    37.   Form,
    38.   FormItem,
    39.   Tabs,
    40.   TabPane,
    41.   Tag,
    42.   Tree,
    43.   Alert,
    44.   Slider,
    45.   Icon,
    46.   Row,
    47.   Col,
    48.   Upload,
    49.   Progress,
    50.   Spinner,
    51.   Badge,
    52.   Card,
    53.   Rate,
    54.   Steps,
    55.   Step,
    56.   Carousel,
    57.   CarouselItem,
    58.   Collapse,
    59.   CollapseItem,
    60.   Cascader,
    61.   ColorPicker,
    62.   Transfer,
    63.   Container,
    64.   Header,
    65.   Aside,
    66.   Main,
    67.   Footer,
    68.   Timeline,
    69.   TimelineItem,
    70.   Link,
    71.   Divider,
    72.   Image,
    73.   Calendar,
    74.   Backtop,
    75.   PageHeader,
    76.   CascaderPanel,
    77.   Loading,
    78.   MessageBox,
    79.   Message,
    80.   Notification,
    81. } from "element-ui";
    82.  
    83. // 注意导入的组件都需要使用 Vue.use() 进行注册
    84. Vue.use(Pagination);
    85. Vue.use(Dialog);
    86. Vue.use(Autocomplete);
    87. Vue.use(Dropdown);
    88. Vue.use(DropdownMenu);
    89. Vue.use(DropdownItem);
    90. Vue.use(Menu);
    91. Vue.use(Submenu);
    92. Vue.use(MenuItem);
    93. Vue.use(MenuItemGroup);
    94. Vue.use(Input);
    95. Vue.use(InputNumber);
    96. Vue.use(Radio);
    97. Vue.use(RadioGroup);
    98. Vue.use(RadioButton);
    99. Vue.use(Checkbox);
    100. Vue.use(CheckboxButton);
    101. Vue.use(CheckboxGroup);
    102. Vue.use(Switch);
    103. Vue.use(Select);
    104. Vue.use(Option);
    105. Vue.use(OptionGroup);
    106. Vue.use(Button);
    107. Vue.use(ButtonGroup);
    108. Vue.use(Table);
    109. Vue.use(TableColumn);
    110. Vue.use(DatePicker);
    111. Vue.use(TimeSelect);
    112. Vue.use(TimePicker);
    113. Vue.use(Popover);
    114. Vue.use(Tooltip);
    115. Vue.use(Breadcrumb);
    116. Vue.use(BreadcrumbItem);
    117. Vue.use(Form);
    118. Vue.use(FormItem);
    119. Vue.use(Tabs);
    120. Vue.use(TabPane);
    121. Vue.use(Tag);
    122. Vue.use(Tree);
    123. Vue.use(Alert);
    124. Vue.use(Slider);
    125. Vue.use(Icon);
    126. Vue.use(Row);
    127. Vue.use(Col);
    128. Vue.use(Upload);
    129. Vue.use(Progress);
    130. Vue.use(Spinner);
    131. Vue.use(Badge);
    132. Vue.use(Card);
    133. Vue.use(Rate);
    134. Vue.use(Steps);
    135. Vue.use(Step);
    136. Vue.use(Carousel);
    137. Vue.use(CarouselItem);
    138. Vue.use(Collapse);
    139. Vue.use(CollapseItem);
    140. Vue.use(Cascader);
    141. Vue.use(ColorPicker);
    142. Vue.use(Transfer);
    143. Vue.use(Container);
    144. Vue.use(Header);
    145. Vue.use(Aside);
    146. Vue.use(Main);
    147. Vue.use(Footer);
    148. Vue.use(Timeline);
    149. Vue.use(TimelineItem);
    150. Vue.use(Link);
    151. Vue.use(Divider);
    152. Vue.use(Image);
    153. Vue.use(Calendar);
    154. Vue.use(Backtop);
    155. Vue.use(PageHeader);
    156. Vue.use(CascaderPanel);
    157.  
    158. Vue.use(Loading.directive);
    159.  
    160. // Vue.use(Message); // 不要用这种注册方式(会刷新时自动消息提示)
    161. // Vue.use(MessageBox); // 不要用这种注册方式(会刷新时自动弹框)
    162. Vue.component(Message.name, Message); // 换用这种注册方式
    163. Vue.component(MessageBox.name, MessageBox); // 换用这种注册方式
    164.  
    165. Vue.prototype.$loading = Loading.service;
    166. Vue.prototype.$msgbox = MessageBox;
    167. Vue.prototype.$alert = MessageBox.alert;
    168. Vue.prototype.$confirm = MessageBox.confirm;
    169. Vue.prototype.$prompt = MessageBox.prompt;
    170. Vue.prototype.$notify = Notification;
    171. Vue.prototype.$message = Message;

    src  /  views  /  About.vue

    2.  
    3. <script>
    4. export default {
    5.   methods: {
    6.     openMessage() {
    7.       this.$message("这是一条消息提示");
    8.     },
    9.     openMessageBox() {
    10.       this.$alert("这是一段内容", "标题名称", {
    11.         confirmButtonText: "确定",
    12.         callback: (action) => {
    13.           this.$message({
    14.             type: "info",
    15.             message: `action: ${action}`,
    16.           });
    17.         },
    18.       });
    19.     },
    20.   },
    21. };
    22. script>

    2、Ant Design Vue 组件库 

    https://www.antdv.com/docs/vue/introduce-cn

    二、安装图表库

    Apache ECharts

    一个基于 JavaScript 的开源可视化图表库

    Apache ECharts

    推荐观看此文章入门简介 ：

    ECharts可视化图表库之初使用

    npm i echarts -S

    “echarts”: “5.3.3” 

    将 echarts 全部引入，这样一来，我们可以在该页面使用 echarts 所有组件；

    import * as echarts from "echarts";

     按需引入 ECharts 图表和组件 

    上面的代码会引入 ECharts 中所有的图表和组件，但是假如你不想引入所有组件，

    也可以使用 ECharts 提供的按需引入的接口来打包必须的组件。

    1. // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
    2. import * as echarts from 'echarts/core';
    3. // 引入柱状图图表，图表后缀都为 Chart
    4. import { BarChart } from 'echarts/charts';
    5. // 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
    6. import {
    7.   TitleComponent,
    8.   TooltipComponent,
    9.   GridComponent,
    10.   DatasetComponent,
    11.   TransformComponent
    12. } from 'echarts/components';
    13. // 标签自动布局，全局过渡动画等特性
    14. import { LabelLayout, UniversalTransition } from 'echarts/features';
    15. // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
    16. import { CanvasRenderer } from 'echarts/renderers';
    17.  
    18. // 注册必须的组件
    19. echarts.use([
    20.   TitleComponent,
    21.   TooltipComponent,
    22.   GridComponent,
    23.   DatasetComponent,
    24.   TransformComponent,
    25.   BarChart,
    26.   LabelLayout,
    27.   UniversalTransition,
    28.   CanvasRenderer
    29. ]);
    30.  
    31. // 接下来的使用就跟之前一样，初始化图表，设置配置项
    32. var myChart = echarts.init(document.getElementById('main'));
    33. myChart.setOption({
    34.   // ...
    35. });

    在  src  /  根目录下新建  components 组件文件夹  /  新建一个  echarts  文件夹

    用于存放二次封装 ECharts 的公共组件

    src  /  components  /  echarts  /  EchartsChart.vue

    2. <template>
    3.   <div>
    4.     <div id="id" class="myChart" :style="setStyle">div>
    5.   div>
    6. template>
    7.  
    8. <script>
    9. import * as echarts from "echarts";
    10.  
    11. export default {
    12.   name: "pieChart",
    13.   props: {
    14.     id: {
    15.       type: String, // 类型
    16.       default: null, // 默认值
    17.     },
    18.     options: {
    19.       type: Object, // 类型
    20.       default: () => ({}),
    21.     },
    22.     setStyle: {
    23.       type: Object, // 类型
    24.       default: () => ({}),
    25.     },
    26.   },
    27.   data() {
    28.     return {
    29.       myChart: null,
    30.       myChartStyle: { height: "300px" }, // 图表样式
    31.       tooltip: {
    32.         trigger: "item",
    33.       },
    34.       legend: {
    35.         origin: "vertical",
    36.         left: "left",
    37.       },
    38.     };
    39.   },
    40.   watch: {
    41.     option: {
    42.       handler(newValue) {
    43.         this.$nextTick(() => {
    44.           if (document.getElementById(this.id)) {
    45.             if (!this.myChart) {
    46.               this.myChart = echarts.init(document.getElementById(this.id));
    47.             }
    48.             this.myChart.setOption(newValue, true);
    49.           }
    50.         });
    51.       },
    52.     },
    53.     deep: true,
    54.   },
    55.   mounted() {
    56.     this.pieChart(this.id, this.options);
    57.     window.addEventListener("resize", function () {
    58.       if (this.myChart) {
    59.         this.myChart.resize();
    60.       }
    61.     });
    62.   },
    63.   methods: {
    64.     pieChart(id, options) {
    65.       if (document.getElementById(id)) {
    66.         this.myChart = echarts.init(document.getElementById(id));
    67.         this.myChart.setOption(options, true);
    68.       }
    69.     },
    70.   },
    71.   beforeDestroy() {
    72.     // 解决 Echarts 页面切换卡顿问题
    73.     this.myChart.clear();
    74.   },
    75. };
    76. script>
    77.  
    78. <style lang="scss" scoped>
    79. // .myChart {
    80. //   width: 95%;
    81. //   height: 400px;
    82. // }
    83. style>

    使用 ：

    三、@  符 提示 文件配置

    jsconfig.json

    1. { 
    2.   "compilerOptions": {
    3.     "baseUrl": "./",
    4.     "paths": {
    5.         "@/*": ["src/*"]
    6.     }
    7.   },
    8.   "exclude": ["node_modules", "dist"]
    9. }

     

    未完待续 。。。 

  • 相关阅读:
    【技能树笔记】网络篇——练习题解析（三）
    【调研】在线考试系统调研
    最快的包管理器--pnpm创建vue项目完整步骤
    SpringMVC框架面试专题（初级-中级）-第七节
    SpringBoot SpringBoot 开发实用篇 5 整合第三方技术 5.26 SpringBoot 整合 RocketMQ
    微服务的构建
    什么是谷歌推广？谷歌推广怎么做？
    软件设计模式系列之二十三——策略模式
    神经网络 深度神经网络,深度神经网络知识图谱
    FPGA图像采集与显示项目（一）带LOGO的VGA显示模块
  • 原文地址：https://blog.csdn.net/weixin_58099903/article/details/126546056