Vue+Element ui idea开发配置
复制代码
1
2Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
官网:https://element.eleme.cn/#/zh-CN
idea 打开vue项目
设置插件,安装vue.js服务
选择运行,编辑配置,添加npm
命令:npm
脚本:server
更改项目
删除views,components下的视图和组件
- 添加全局配置文件
vue.config.js
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29// 配置全局文件 const path = require('path') module.exports = { // 关闭eslist语法检查 lintOnSave: false, // 开发服务器相关配置s devServer: { // 配置静态资源目录 contentBase: path.join(__dirname, 'public'), // 设置开发服务器的端口号 port: 8848 }, // 配置webpack相关 configureWebpack: { // 解析 resolve: { // 配置路径别名 alias: { '@v': path.resolve(__dirname, 'src/views'), '@c': path.resolve(__dirname, 'src/components') } } } }
- 更改App.vue
删去所有样式和div,保留view,添加全局样式配置
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16<template> <div> <router-view/> </div> </template> <style lang="scss"> *{ margin: 0; padding: 0; list-style: none; outline: none ; text-decoration: none ; } </style>
- 新建插件文件夹,和index.s
注册element ui组件库
复制代码
1
2
3
4
5
6
7
8// 注册element ui组件库 import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI)
- 更改路由的index.js文件
删去所有路由,
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ ] const router = new VueRouter({ routes }) export default router
- 更改main.js
删去无用信息,添加自己写的插件,及导入element ui
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18import Vue from 'vue' import App from './App.vue' // 导入状态管理 import store from './store' // 导入路由 import router from './router' // 导入插件 import './plugin' Vue.config.productionTip = false new Vue({ router, store, render: h => h(App) }).$mount('#app')
此时,项目即为空项目,可以开始自己项目的开发了
最后
以上就是谨慎猫咪最近收集整理的关于Vue+Element ui idea开发配置的全部内容,更多相关Vue+Element内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复