vue中安装模块

春天姐姐

已于 2022-03-30 17:35:23 修改

阅读量3.1k

点赞数 7

CC 4.0 BY-SA版权

文章标签： vue

于 2019-04-19 18:36:56 首次发布

本文链接：https://blog.youkuaiyun.com/qq_26337713/article/details/89406110

本文介绍了在Vue项目中如何安装和使用iview、echarts、jquery、element-ui及指定版本的vue-router。包括安装步骤、引入配置以及在组件中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装iview
安装淘宝镜像之后，在终端中输入命令

npm install -g cnpm --registry=https://registry.npm.taobao.org         --安装淘宝镜像
cnpm install --save iview            --安装iview

在main.js中引入

import iview from 'iview'
import 'iview/dist/styles/iview.css'
Vue.use(iview)

组件中便可使用iview了

2.安装echarts

npm install -g cnpm --registry=https://registry.npm.taobao.org               --安装淘宝镜像
cnpm install echarts -s                 --安装echarts

在main.js中引入

import echarts from 'echarts'
Vue.prototype.$echarts=echarts

在vue组件中写

<template>
  <div class="hello">  
    <div id="chart" class="chart">   </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {}
  },
  mounted(){
      this.myChart = 
              this.$echarts.init(document.getElementById("chart"));
          this.drawChart();
  },
  methods:{
     drawChart(){
             let option = {
                  xAxis: {
                      type: 'category',
                      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                  },
                  yAxis: {
                      type: 'value'
                  },
                  series: [{
                      data: [120, 200, 150, 80, 70, 110, 130],
                      type: 'bar'
                  }]
              };

             this.myChart.setOption(option);
                // window.onresize = function(){
                //        this.myChart.resize()
                //   }
         
          }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.chart{width: 500px; height: 500px;}
</style>

3.安装jquery
1.在终端中执行命令
npm install jquery --save-dev

2、在项目根目录下的build/webpack.base.conf.js文件中
1》加入以下代码
var webpack = require(“webpack”)
2》在module.exports对象的最下面加入以下代码

plugins: [
    new webpack.optimize.CommonsChunkPlugin('common.js'),
    new webpack.ProvidePlugin({
      jQuery: "jquery",
      $: "jquery"
    })
  ]

在这里插入图片描述
3.在src/main.js中引入

import $ from 'jquery'

此时项目中全局引入了jquery

4安装element ui

npm i element-ui -S

在src下的main.js文件中写入如下代码

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

在这里插入图片描述
5 安装指定版本的vue router
npm i vue vue-router@3.2.0