zoukankan      html  css  js  c++  java
  • spring boot + vue + element-ui全栈开发入门——集成element-ui

     一.IDE开发工具


    常用的开发工具有webstorm和sublime。

    我个人喜好用Atom+插件的形式

    打开Atom,在file --> settings --> packages中收入vue开发相关的插件

    beautify:代码格式

    atom-html-preview:html代码提示

    language-vue、language-vue-component:vue语言

    lint-sass-vue:vue的sass语言

    vue-autocomplete:vue语法提示

    文件结构如下:

    二、安装组件


    进入package.json同级目录

    运行

    cnpm install --save axios
    

      

    安装axios,用于调用http请求

    安装element-ui库

    cnpm install --save element-ui
    

      

    安装font-awesome图标库

    cnpm install --save font-awesome
    

      

    安装sass库

    cnpm install --save-dev node-sass
    cnpm install --save-dev sass-loader
    

      

    安装mock.js

    cnpm install --save-dev mockjs
    cnpm install --save-dev axios-mock-adapter
    

    其中,axios-mock-adapter能拦截http请求的同时模拟需要的数据 

    三、生成好看的主题风格


    进去https://elementui.github.io/theme-chalk-preview/#/zh-CN网站,选择喜欢的颜色

    这里,我选择了一个深蓝色作为主题颜色,并下载

    把下载的主题放置目录下 srcassets heme

    四、编写程序入口


    在main.js中导入“font-awesome”和“element-ui”

    import 'font-awesome/css/font-awesome.min.css'
    
    import ElementUI from 'element-ui'
    import './assets/theme/element-#0b0a3e/index.css'
    Vue.use(ElementUI)
    

      

    完整的main.js代码如下:

    // 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'
    
    Vue.config.productionTip = false
    
    import 'font-awesome/css/font-awesome.min.css'
    
    import ElementUI from 'element-ui'
    import './assets/theme/element-#0b0a3e/index.css'
    Vue.use(ElementUI)
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })
    

      

    返回目录

    git代码地址:https://github.com/carter659/spring-boot-vue-element.git

    如果你觉得我的博客对你有帮助,可以给我点儿打赏,左侧微信,右侧支付宝。

    有可能就是你的一点打赏会让我的博客写的更好:)

  • 相关阅读:
    Control.CheckForIllegalCrossThreadCalls
    c#禁止Webbrowser控件的弹出脚本错误对话框
    c#,WebBrowser 判断网页是否加载完毕
    c#里的动态数组ArrayList
    C#数据类型转换
    Net2.0 的新线程 ParameterizedThreadStart &BackgroundW
    在C#中使用委托的方式触发事件
    ASP.NET运行原理
    第六讲:ObjC 内存管理4 自动释放池
    第二讲:ObjC 点语法
  • 原文地址:https://www.cnblogs.com/GoodHelper/p/8430861.html
Copyright © 2011-2022 走看看