vue-cli完整地引入element-ui

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

1. 因为该组件会依赖于jQuery，所以先安装jQuery所需依赖：

　　进入npm控制台，输入指令：

　　cnpm install jquery --save-dev

　　然后在入口文件main.js中引入：

　import jquery from 'jquery'

　　最后配置build目录下的webpack.base.config.js文件，在

　module.exports = {
　　　　　　entry: {
　　　　　　app: './src/main.js',
　　　　},

　　后面添加以下内容：　　

plugins: [
　　　　　　new webpack.ProvidePlugin({
　　　　　　$: "jquery",
　　　　　　jQuery: "jquery",
　　　　　　"windows.jQuery": "jquery"
　　　　　　})
　　　　]

　　注意前后用逗号分隔。

2. 安装element-ui的依赖：

　　进入npm控制台，输入指令：

cnpm install element-ui --save-dev

3. 配置build目录下的webpack.base.config.js文件，向文件中加入以下内容：

　var webpack = require('webpack')　
　　resolve: {
　　　　extensions: ['.js', '.vue', '.json'],
　　　　alias: {
　　　　　　'vue$': 'vue/dist/vue.esm.js',
　　　　　　'@': resolve('src'),
　　　　　　'assets': path.resolve(__dirname, '../src/assets'),
　　　　　　'scss_vars':'@/styles/vars.scss',
　　　　　　jquery: "jquery/src/jquery"
　　　　}
　　}

4. 在入口文件main.js中引入element-ui：

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

到此，基本完成了所有配置工作。但是，部分人可能还是会存在模板无法找到的问题（我安装时就遇到了），在花了整整一天时间尝试后找到了解决办法：

　　在build文件下的webpack.base.conf.js中加上下面的代码即可

　{  
　　　　　　test: /\.css$/,  
　　　　　　include: [  
　　　　　　　　  /src/,//表示在src目录下的css需要编译  
　　　　　　　　'/node_modules/element-ui/lib/'   //增加此项  
　　　　　　  ],  
　　　　　　 loader: 'style-loader!css-loader'  
　　　　},


　　另外说明下假如你的css文件是在src目录下的话就添加src的路径，如上图，element-ui或者mint-ui(minit-ui的我没试过，个人认为也要加上去webpack才能查找到)，假如你的css文件是在其他目录下的，原理一样。

　　以上就是博主为大家介绍的这一板块的主要内容，这都是博主自己的学习过程，希望能给大家带来一定的指导作用，有用的还望大家点个支持，如果对你没用也望包涵，有错误烦请指出。如有期待可关注博主以第一时间获取更新哦，谢谢！

版权声明：本文为博主原创文章，未经博主允许不得转载。　　

以上是 vue-cli完整地引入element-ui 的全部内容， 来源链接： utcz.com/z/374962.html

回到顶部