1.Vue脚手架的基本用法

使用步骤

  • 安装3.x版本的Vue脚手架
npm install -g @vue/cli
  • 基于Vue3.x版本的脚手架创建Vue项目
//1.基于交互命令行的方式创建新版Vue项目
vue create my-project

//2.基于图形化界面的方式创建新版Vue项目
vue ui

//3.基于2.x的旧版本创建旧版Vue项目
npm install -g @vue/cli-init
vue init webpack my-project

2.Vue脚手架自定义配置

1.packag.js配置项目(不推荐)

例如

    "vue": {
        "devServer": {
            "port": 8080,
            "open": true
        }
    }

2.通过单独的配置文件配置项目(推荐)

  • 在项目的根目录创建vue.config.js文件
  • 在该文件中进行相关配置,从而覆盖默认配置

例如:

module.exports = {
    devServer = {
        open: true,
        port: 8080
    }
}

3.Element-UI的基本使用

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

1.基于命令行方式手动安装

  • 安装依赖包 npm i element-ui -S
  • 导入Element-UI相关资源
//导入组件库
import ElementUI from 'element-ui';

//导入组件相关样式
import 'element-ui/lib/theme-chalk/index.css'

//配置Vue插件
Vue.use(ElementUI)

2.基于图形化界面自动安装

  • 运行Vue ui命令,打开图形化界面
  • 通过Vue项目管理器,进入具体项目配置面板
  • 点击插件->添加插件,进入插件查询面板
  • 搜索vue-cli-plugin-element并安装
  • 配置插件,实现按需导入,从而减少打包后项目的体积
Last modification:May 27th, 2020 at 02:15 am
如果觉得我的文章对你有用,请随意赞赏