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

vue+element 构建的后台管理系统项目(1)新建项目

时间:2018-08-31 01:19:18      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:启动   ali   运行   imp   har   效果   .com   新建   demo   

1.运行 vue init webpack demo   这里的demo是你项目的名字

2.npm run dev

 查看项目启动效果

技术分享图片

 

3.安装Element 

cd 项目

cmd  运行

npm i element-ui -S

4.在main.js  引入element

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from ‘vue‘
import App from ‘./App‘
import router from ‘./router‘
import ElementUI from ‘element-ui‘
import ‘element-ui/lib/theme-chalk/index.css‘

Vue.config.productionTip = false

Vue.use(ElementUI);
/* eslint-disable no-new */
new Vue({
  el: ‘#app‘,
  router,
  components: { App },
  template: ‘<App/>‘
})

  注意这里有个坑

我本来引入的代码是 

import ‘element-ui/lib/theme-default/index.css‘

  npm 运行保错

技术分享图片

通过修改为

import ‘element-ui/lib/theme-chalk/index.css‘

  就运行成功

下面看看运行起来的效果

技术分享图片

效果:

技术分享图片

 

vue+element 构建的后台管理系统项目(1)新建项目

标签:启动   ali   运行   imp   har   效果   .com   新建   demo   

原文地址:https://www.cnblogs.com/guangzhou11/p/9563436.html

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