vue-cli常用包引入方法

此文介绍了vue-cli中常用包的引入方法

如下包:

1.引入vue(默认有,不需要手动引入)
import Vue from 'vue'
说明:前端js框架

2.引入ElementUI
npm i element-ui -S
import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
说明:跟vue搭配的css样式框架

3.引入axios
npm install axios

import axios from 'axios';
Vue.prototype.$http=axios;//将axios改写到vue原型属性,调用方式例如this.$http.post(xxx)
说明:调用后端接口的工具

4.引入vuex
npm install vuex
import Vuex from 'vuex'
Vue.use(Vuex)
说明:响应式全局数据管理工具

5.引入vue-router
vue-cli初始化的时候选择y安装上,后续手动安装不知为啥不管用
说明:路由工具,根据不同的url地址渲染指定的页面

5.引入ckeditor
npm install --save @ckeditor/ckeditor5-build-decoupled-document
import CKEditor from '@ckeditor/ckeditor5-build-decoupled-document'

说明:引入ckeditor富文本编辑器

扫描二维码关注公众号，回复： 9578155 查看本文章

6.引入sass

npm install node-sass -D
npm install sass-loader -D

打开webpack.base.config.js在rues里面加上

{
        test: /\.scss$/,
        loaders: ["style", "css", "sass"]
}

说明:css扩展语言

7.引入moment

npm install moment -S

import moment from 'moment'

Vue.prototype.$moment=moment;//设置到vue原型属性,调用方式this.$moment(date).format("YYYY-MM-DD HH:mm:ss");

format_date(row, column) {

       var date = row[column.property];

       if (date == undefined) {

            return "";

         }

       return this.$moment(date).format("YYYY-MM-DD HH:mm:ss");

}

表格列中添加:formatter="format_date"

说明:elementui表格日期格式化,时间戳转时间格式