vue项目中组件的安装

Vue-router

是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。

安装:npm install vue-router --save

通过以上步骤,我们已经安装好了vue-router,但是在vue-cli中我们如何使用呢?

首先,我们需要在main.js文件中导入并注册vue-router:

//ES6语法导入

import VueRouter from 'vue-router'

//注册

Vue.use(VueRouter)

然后便是实例化:

const router = new VueRouter({

mode: 'history',

routes:[

  {path: '/', component:DemoHome},

  {path: '/about', component:DemoAbout},

  {path: '/contact', component:DemoContact}

]

})

path: 是路由的路径。

component: 是该路由需要渲染的组件。

Element-ui

Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

安装:npm i element-ui -S

在main.js中引入和注册

引入:

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

注册:

Vue.use(ElementUI);

Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

安装:

npm install vuex --save

在main.js中引入和注册

引入:

import Vuex from 'vuex‘

注册:

Vue.use(Vuex)

VueAwesomeSwiper

轮播图插件,可以同时支持Vue.js(1.X ~ 2.X),兼顾PC和移动端,随着vue的广泛使用,其中插件swiper也算是使用的比较频繁的插件。

安装:

npm install vue-awesome-swiper --save

在main.js中引入和注册

引入:

import VueAwesomeSwiper from 'vue-awesome-swiper'

注册:

Vue.use(VueAwesomeSwiper)

Echarts

实现数据界面可视化

安装:

npm install echarts --save

在main.js中配置:

import echarts from 'echarts' //引入echarts

Vue.prototype.$echarts = echarts //引入组件

jQuery

安装:npm install jquey

在main.js中引入:

import $ from 'jquery'

这是jquery不是全局的,如果要使用在每一个模块中需要import 。比较麻烦,下面是设置jquery为全局的方法:

修改webpack.base.conf.js(在build文件下)两个地方:

var webpack=require('webpack');

在module.exports的里面加入

plugins: [

    new webpack.optimize.CommonsChunkPlugin('common.js'),

    new webpack.ProvidePlugin({

        jQuery: "jquery",

        $: "jquery"

    })

]

bootstrap

想要在vue中引入bootstrap,引入的时候需要按照如下的步骤进行。

1、引入jquery(上一步骤即可)

2、引入bootstrap

安装:

npm install bootstrap --save-dev

把bootstrap库的js和css放到assets文件夹下,在webpack.base.conf.js的module.exports = {}中的resolve中增加

'bootstrap':resolve('src/assets/bootstrap'),

在main.js中引入:

import 'bootstrap/js/bootstrap.js'

import 'bootstrap/css/bootstrap.css'

axios

安装:npm install axios --save-dev

在main.js中引入注册:

引入:

importaxiosfrom'axios'

注册:

Vue.prototype.$http= axios

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 今天啊,是回家的日子。所以即使是四点十分起床,也一点不觉得辛苦。 五点半,和舍友整理收拾好,就准备踏上回家的归程了...
    蜜桃椰乳阅读 296评论 0 0
  • 教师领袖: 有领导能力进行管理。 有计划、目标和愿景。 穿出成功。 坐在他们可以学习的地方。 乐愿参加会议。 赞赏...
    熠悦之阅阅读 173评论 0 0
  • 盛水的黑杯子 每次回想起自己的大学生活,总是以遗憾的情绪看待,遗憾没有珍惜时光,遗憾没有学习想学的知识,遗憾没有...
    Running_Star阅读 1,009评论 0 0