码迷,mamicode.com
首页 > 其他好文 > 详细

vue/cli创建项目 elementUI基本使用

时间:2020-05-22 00:05:49      阅读:52      评论:0      收藏:0      [点我收藏+]

标签:class   mod   exports   component   安装   项目   main   修改   图片   

Vue 脚手架

Vue 脚手架用于快速生成 Vue 项目基础架构 https://cli.vuejs.org/zh/guide/

安装3.x 版本的Vue脚手架

npm install -g @vue/cli

vue/cli 创建项目

vue create vue_pro

技术图片

技术图片

技术图片

技术图片

技术图片

技术图片

技术图片

通过单独配置文件配置项目

在项目中新建 vue.config.js

module.exports = {
	devServer: {
		open: true, // 编译完成后自动打开浏览器
		port: 8888 // 修改项目端口
	}
}

ElementUI 基本使用

https://element.eleme.cn/#/zh-CN/component/installation

安装依赖包 npm install element-ui -S

// main.js
import ElementUI from ‘element-ui‘ 
import ‘element-ul/lib/theme-chalk/index.css‘ // 导入css样式文件
Vue.use(ElementUI) // 注册组件
// app.vue
<template>
  <div id="app">
    <el-row>
      <el-button type="primary">主要按钮</el-button>
    </el-row>
  </div>
</template>

vue/cli创建项目 elementUI基本使用

标签:class   mod   exports   component   安装   项目   main   修改   图片   

原文地址:https://www.cnblogs.com/article-record/p/12934343.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!