• Vue脚手架与Element-UI


    Vue脚手架

    Vue脚手架的基本用法

    • Vue脚手架概述

      • Vue脚手架用于快速生成Vue项目基础架构,其官网是:https://cli.vuejs.org/zh/
    • 使用步骤

      • 安装3.x版本的Vue脚手架 npm install -g @vue/cli
    • Vue脚手架基本用法

      • 基于交互式命令行的方式,创建新版vue项目
        • vue create my-project
      • 基于图形化界面的方式,创建新版vue项目
        • vue ui
          • babel router linter/formate 使用配置文件
      • 基于2.x的旧模板,创建旧版vue项目,不推荐
        • npm install -g @vue/cli-init
        • vue init webpack my-project
    • Vue脚手架生成的项目结构分析

      • node_modules 依赖包目录
      • public 静态资源目录
      • src 组件源码目录
        • assets 存放样式表、图片等静态资源
        • components Vue单文件组件
        • view 视图组件、模板引擎
        • App.vue 项目根组件,承载所有组件的根组件
        • main.js 项目中打包入口文件
        • router.js 路由相关配置
      • babel.config.js babel配置文件
      • eslintrc.js 语法相关的配置文件
      • gitignore git忽略文件
      • package.json 包管理配置文件
      • postcss.config.js 配置前缀等postcss插件
    • Vue脚手架的自定义配置

      • 通过package.json配置项目
        • 不推荐使用这种配置方式。
          • 因为package.json主要用来管理包的配置信息
          • 为了维护方便,推荐使用vue脚手架相关的配置
          • 单独定义到vue.config.js配置文件中
      • 通过单独的配置文件配置项目
        • 在项目的根目录创建文件vue.config.js
        • 在该文件中进行相关配置,从而覆盖默认配置
    // package.json
    // 必须是符合规范的json语法”
    "vue": {
      "devServer": {
        "port": "8888",
        "open": true
      }
    }
    
    // vue.config.js
    // 在该文件中进行相关配置,从而覆盖默认配置
    module.exports = {
      devServer: {
        port: 8888,
        // 默认打开浏览器
        open: true
      }
    }
    

    Element-UI的基本使用##

    • 概述

      • Element-UI是一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端组件库
      • 官网地址: http://element-cn.eleme.io/#/zh-CN
    • 基于命令行方式手动安装

      • 安装依赖包npm i element-ui -S
      • 导入 Element-UI 相关资源
    // main.js
    // 导入组件库
    import ElementUI from 'element-ui';
    // 导入组件相关样式
    import 'element-ui/lib/theme-chalk/index.css';
    // 配置Vue插件
    Vue.use(ElementUI);
    
    • 基于图形化界面自动安装
      • 运行vue ui命令,打开图形化界面
      • 通过Vue项目管理器,进入具体的项目配置面板
      • 点击插件 - 添加插件,进入插件查询面板
      • 搜索vue-cli-plugin-element并安装
      • 配置插件,实现按需导入,从而减少打包后项目的体积
      • git初始化:init project
  • 相关阅读:
    XHTML基础问答-给初学者
    动态改变表格的行数列数(添加表格)
    记录的添加,修改,删除等操作,??
    数据绑定
    优秀ASP.NET程序员修炼之路
    关于Command的ExecuteNonQuery(),ExecuteScalar(),ExecuteReader方法的区别
    MyEclipse7.5注册
    实用JavaScript代码库
    解决数据库录入中文数据乱码问题
    Oracle占用8080端口问题的解决
  • 原文地址:https://www.cnblogs.com/SharkJiao/p/13728936.html
Copyright © 2020-2023  润新知