vue从入门到女装？？：从零开始搭建后台管理系统（五）其他插件安装

专注前端开发的蒲蒲同学
142 阅读2分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

sass

img

CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

  • sass
  • less
  • Stylus

安装 vue-sass/scss

  $ npm install node-sass --save-dev
  $ npm install sass-loader --save-dev

vue项目中使用sass

注意：sass 和 scss 的语法区别

``` ``` 在vue组件中我们我们经常需要给style添加scoped来使得当前样式只作用于当前组件的节点。添加scoped之后，实际上vue在背后做的工作是将当前组件的节点添加一个像data-v-1233这样唯一属性的标识，当然也会给当前style的所有样式添加[data-v-1233]这样的话，就可以使得当前样式只作用于当前组件的节点。但是我们需要注意的是如果我们添加了子组件，同样的，如果子组件也用scoped标识了，那么在父组件中是不能设置子组件中的节点的。若父组件有scoped，子组件没有设置，同样，也是不能在父组件中设置子组件的节点的样式的，因为父组件用了scoped,那么父组件中style设置的样式都是唯一的了，不会作用与其他的组件样式。

其他地方用sass需要编译成浏览器能解读的css才能正常使用，推荐koala软件

element-ui

安装

  • cdn引入
<!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
<!-- 先引入 Vue --> <script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  • npm安装
  # 安装
  $ npm i element-ui -S

//使用 index.js
  import ElementUI from 'element-ui'
  import 'element-ui/lib/theme-chalk/index.css'
  Vue.use(ElementUI)

示例

img

其他vue-ui组件库

  • ant design
  • vux 做微信端首选
  • Mint UI 同是饿了么开源的组件库，通过 webpack 和 babel 实现了按需引入，高度组件化，但是文档比较粗糙，功能不完善。
  • vue-material
  • ivew
  • vue-admin
  • vue-material
  • vuetify
  • Keen-UI
  • CoreUI-Free-Bootstrap-Admin-Template
  • Framework7-Vue

axios

axios 是一个基于 Promise 的，为浏览器和 Node.js 设计的 HTTP 客户端。它尽可能简化封装了 HTTP 相关的各种操作，在 Web App 中使用非常方便。

  • vue-resourse 与服务器端通信的HTTP插件，用来从服务器端请求数据. 官方已经不维护这个了，推荐使用axios
    # 安装
    npm install vue-resource --save

    //使用 main.js
    import VueResource from 'vue-resource'
    Vue.use(VueResource);
  • axios axios还可以执行并发请求，设置拦截器等，简直不能再好用了
  # 安装
  $ npm install axios --save

  //使用
  // index.js
  import axios from 'axios'
  Vue.prototype.$http = axios
  // 全局配置示例axios.js
  axios.defaults.timeout = 5000 ;
  axios.defaults.baseURL = "http://66.112.214.33"
  axios.defaults.baseURL = "";
  axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
  axios.defaults.transformRequest = [function(param) {
        let ret = "";
        for (let it in param) {
          ret +=
            encodeURIComponent(it) + "=" + encodeURIComponent(param[it]) + "&";
        }
        ret = ret.slice(0, ret.length - 1);
        return ret;
      }];
  // 使用示例
  this.$http.post('url',data).then(
    (successData) => {
      this.$set(this.data,"url",successData.data.url);
      successData.data)
      console.log("success",this.data,"||",successData.data)
      },
    (failData) => {console.log("fail",failData)}
          );

vuex

组件交互状态管理包，简单的父子组件通信需求不高的可以暂时不用这个。 这里我个人建议不要为了用 vuex 而用 vuex。就具体需求来看，如果系统之间的耦合性没有那么高完全没有必要使用 vuex 来存储data。每个页面里存放自己的 data 就行。当然有些数据还是需要用 vuex 来统一管理的，如登录token,用户信息，或者是一些全局个人偏好设置等，还是用vuex管理更加的方便，具体当然还是要结合自己的业务场景的。

  # 安装
  $ npm install vuex --save

echart

echart是功能很全，社区demo也都很丰富很完整，但项目太大了，导致页面打开很卡顿，建议按需引用，当然也可以图省事全部引用。

``` # 安装 $ npm install echarts -S ``` ```javascript // 引入 ECharts 主模块 import 'echarts/lib/echarts' // 引入柱状图 import 'echarts/lib/chart/bar' // 引入提示框和标题组件 import 'echarts/lib/component/tooltip' import 'echarts/lib/component/title' ```

others

富文本编辑器vue-editor2，代码编辑器vue-codemirror，markdown编辑器vue-markdown等

avatar
文章
阅读
粉丝