zoukankan      html  css  js  c++  java
  • 前端工程化(Vue-cli3和Element-UI)

    目标:
      能够使用Vue脚手架
      能够使用Element-UI
    目录:
      Vue脚手架
      Element-UI的基本使用

    1、Vue脚手架
    1.1、Vue脚手架的基本用法
    Vue脚手架用于快速生成Vue项目基础架构,其官网地址为:https://cli.vuejs.org/zh/
    使用步骤:
      安装3.x版本的Vue脚手架
      npm install -g @vue/cli
    基于3.x版本的脚手架创建Vue项目
      基于交互式命令的方式,创建新版Vue项目
        vue create my-project
      基于图形化界面的方式,创建新版vue项目
        vue ui
      基于2.x的旧版本,创建旧版vue项目
        npm install -g @vue/cli-init
        vue init webpack my-project
    1.2、Vue脚手架生成的项目结构分析
    如图所示:


    1.3、Vue脚手架的自定义配置
    通过package.json配置项目

    //必须是符合规范的json语法
    "vue":{
        "devServer":{
            "port":8888,//指定项目启动的端口
            "open":true//项目启动之后自动打开浏览器
        }
    },

    注意:不推荐使用这种配置方式,因为package.json主要用来管理包的配置信息;为了方便维护,推荐将vue脚手架的相关配置单独定义到vue.config.js配置文件中。
    通过单独的配置文件配置项目
      1、在项目的根目录创建文件vue.config.js
      2、在该文件中进行相关配置,从而覆盖默认配置

    //vue.config.js文件
    module.exports = {
        devServer:{
            port:8888,//指定项目启动的端口
            open:true//项目启动之后自动打开浏览器
        }
    }

    2、Element-UI的基本使用
    Element-UI:一套为开发者、设计师和产品经理准备的基于Vue2.0的桌面端组件库。
    官网地址为:http://element-cn.eleme.io/#/zh-CN
    基于命令行方式手动安装
      1、安装依赖包 npm i element-ui -S
      2、导入Element-UI相关资源

    //导入组件库
    import ElementUI from 'element-ui';
    //导入组件相关样式
    import 'element-ui/lib/theme-chalk/index.css';
    //配置Vue插件
    Vue.use(ElementUI);

    基于图形化界面自动安装
      1、运行vue ui命令,打开图形化界面
      2、通过Vue项目管理器,进入具体的项目配置面板
      3、点击 插件->添加插件,进入插件查询页面
      4、搜索vue-cli-plugins-element并安装
      5、配置插件,实现按需导入,从而减少打包后项目的体积

  • 相关阅读:
    Associative Embedding: Detection and Grouping loss
    Stacked Hourglass Networks 以及 PyTorch 实现
    论文笔记Stacked Hourglass Networks
    LiveQing私有云端直播点播流媒体服务-功能一张图
    监控实时直播的四分屏的前端展示
    LiveQing视频流媒体开放平台利用 webpack 打包压缩后端代码
    安防监控直播中无插件web直播方案中实现快照抓取的功能
    RTSP-Onvif摄像机web直播遇到的时间戳问题导致的卡顿解决方案
    H5实现视频监控网络直播时前端自动适配
    H5实现无插件视频监控按需直播
  • 原文地址:https://www.cnblogs.com/michealyang/p/13803195.html
Copyright © 2011-2022 走看看