前端小白vue新建webpack引入element-ui

最新推荐文章于 2025-04-04 23:03:48 发布
原创 最新推荐文章于 2025-04-04 23:03:48 发布 · 4.5k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#element-ui #vue #webpack #node #vue-cli

本文介绍了前端新手如何使用vue-cli创建项目，遇到问题后通过cnpm解决，接着创建webpack模板并成功初始化项目。在引入element-ui过程中，详细讲述了下载插件、配置loader以解决报错的过程，最终成功显示element-ui的按钮。

打开项目文件夹，安装vue脚手架




全局安装vue-cli

G:\GITHUB>npm i vue-cli -g

然后就报错了

npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\absolute
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\amdefine
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\ansi-red
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\array-union
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\arrify
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\asn1
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\camelcase
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\capture-stack-trace
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\caseless
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\chardet
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\cli-spinners
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\clone
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\co
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\coffee-script
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\co-from-stream
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\commander
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\dashdash
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\decamelize
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\delayed-stream
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\combined-stream
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\duplexer3
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\enable
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\escape-string-regexp
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\esprima
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\extsprintf
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\fast-deep-equal
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\fast-json-stable-stringify
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\forever-agent
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\get-stream
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\fs.realpath
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\getpass
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\graceful-readlink
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\git-clone
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\has-ansi
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\has-flag
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\has-symbol-support-x
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\has-generators
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\hoek
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\ini
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\cryptiles
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\is-buffer
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\is-fullwidth-code-point
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\extend-shallow
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\is-object
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\is-promise
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\is-utf8
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\is-stream
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\isarray
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\buffer
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\ecc-jsbn
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\jsbn
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\json-schema
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\json-schema-traverse
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\har-validator
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\ajv
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\json-stringify-safe
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\jsonfile
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\lazy-cache
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\lodash
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\longest
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\lowercase-keys
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\form-data
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\minimatch
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\minimist
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\mute-stream
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\os-homedir
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\pend
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\performance-now
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\pinkie
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\pinkie-promise
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\proto-list
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\config-chain
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\npm-conf
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\get-proxy
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\punycode
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\repeat-string
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\center-align
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\right-align
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\rx-lite-aggregates
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\safe-buffer
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\cli-cursor
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\sntp
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\argparse
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\string_decoder
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\stringstream
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\strip-ansi
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\string-width
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\through
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\thunkify
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\thunkify-wrap
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\timed-out
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\external-editor
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\toml
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\tunnel-agent
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\tweetnacl
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\bcrypt-pbkdf
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\sshpk
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\unzip-response
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\caw
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\util-deprecate
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\verror
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\jsprim
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\win-fork
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\window-size
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\wrap-fn
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\wrappy
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\once
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\end-of-stream
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\xtend
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\yaml-js
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\yargs
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\uglify-js
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\decompress-unzip
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\decompress
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\handlebars
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\consolidate
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\inquirer
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\multimatch
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\semver
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\uid
npm WARN checkPermissions Missing write access to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\user-home
npm ERR! path C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\absolute
npm ERR! code ENOENT
npm ERR! errno -4058
npm ERR! syscall access
npm ERR! enoent ENOENT: no such file or directory, access 'C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\absolute'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2018-04-12T03_19_02_083Z-debug.log

之后使用cnpm安装

就可以了。

这个问题Q1需要大牛回答一下

cnpm i vue-cli -g
Downloading vue-cli to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli_tmp
Copying C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli_tmp\_vue-cli@2.9.3@vue-cli to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli
Installing vue-cli's dependencies to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli/node_modules
[1/20] commander@^2.9.0 installed at node_modules\_commander@2.15.1@commander
[2/20] multimatch@^2.1.0 installed at node_modules\_multimatch@2.1.0@multimatch
[3/20] consolidate@^0.14.0 installed at node_modules\_consolidate@0.14.5@consolidate
[4/20] async@^2.4.0 installed at node_modules\_async@2.6.0@async
[5/20] rimraf@^2.5.0 existed at node_modules\_rimraf@2.6.2@rimraf
[6/20] minimatch@^3.0.0 installed at node_modules\_minimatch@3.0.4@minimatch
[7/20] semver@^5.1.0 installed at node_modules\_semver@5.5.0@semver
[8/20] ora@^1.3.0 installed at node_modules\_ora@1.4.0@ora
[9/20] chalk@^2.1.0 installed at node_modules\_chalk@2.3.2@chalk
[10/20] uid@0.0.2 installed at node_modules\_uid@0.0.2@uid
[11/20] coffee-script@1.12.7 existed at node_modules\_coffee-script@1.12.7@coffee-script
[12/20] read-metadata@^1.0.0 installed at node_modules\_read-metadata@1.0.0@read-metadata
[13/20] tildify@^1.2.0 installed at node_modules\_tildify@1.2.0@tildify
[14/20] user-home@^2.0.0 installed at node_modules\_user-home@2.0.0@user-home
[15/20] inquirer@^3.3.0 installed at node_modules\_inquirer@3.3.0@inquirer
[16/20] metalsmith@^2.1.0 installed at node_modules\_metalsmith@2.3.0@metalsmith
[17/20] validate-npm-package-name@^3.0.0 installed at node_modules\_validate-npm-package-name@3.0.0@validate-npm-package-name
[18/20] handlebars@^4.0.5 installed at node_modules\_handlebars@4.0.11@handlebars
[19/20] download-git-repo@^1.0.1 installed at node_modules\_download-git-repo@1.0.2@download-git-repo
[20/20] request@^2.67.0 installed at node_modules\_request@2.85.0@request
deprecate metalsmith@2.3.0 › gray-matter@2.1.1 › coffee-script@^1.12.4 CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
Recently updated (since 2018-04-05): 4 packages (detail see file C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\.recently_updates.txt)
  2018-04-08
    → ora@1.4.0 › cli-spinners@^1.0.1(1.3.1) (17:15:22)
    → request@2.85.0 › aws4@^1.6.0(1.7.0) (06:24:14)
    → inquirer@3.3.0 › external-editor@2.2.0 › iconv-lite@0.4.21 › safer-buffer@^2.1.0(2.1.
2) (18:42:42)
  2018-04-07
    → inquirer@3.3.0 › external-editor@2.2.0 › iconv-lite@^0.4.17(0.4.21) (12:31:13)
All packages installed (253 packages installed from npm registry, used 13s, speed 464.51kB/s, json 236(1.51MB), tarball 4.46MB)
[vue-cli@2.9.3] link C:\Users\Administrator\AppData\Roaming\npm\vue@ -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\bin\vue
[vue-cli@2.9.3] link C:\Users\Administrator\AppData\Roaming\npm\vue-init@ -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init
[vue-cli@2.9.3] link C:\Users\Administrator\AppData\Roaming\npm\vue-list@ -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-list

新建名为element-ui-form的webpack模板

vue init webpack-simple element-ui-form

配置什么的默认就好了

这时就会出一个element-ui-form的文件夹


进入到这个文件夹中

cd element-ui-form

初始化项目，下载依赖

cnpm i

运行项目

npm run dev

显示这个页面就代表新建模板是成功的

接下来下载elementUI插件

cnpm i element-ui --save

引入elementUI



把多余内容删除，写一个element-ui的el-button来测试是否引入了elemen-ui


然后报错




安装loader

npm install style-loader css-loader --save-dev

然后在webpack.config.js中配置loader

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        loader: 'file-loader'
      },    
      // {  
      //   test: /\.css$/,  
      //   loader: 'style-loader!css-loader'  
      // },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}



然后。。element-ui的按钮标签就出来了



Vuecli中添加elementui插件
qq_45359086的博客
06-11 1813
在Vuecli中添加elementui插件 1.CL4配置 ​ Vue提供了一个CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。CLI4的配置流程大致总结了流程如下： 打开终端： ​ 安装node.js，安装完node.js之后，npm也会自动安装。查询是否安装成功的命令：node -v npm -v ​ 使用npm安装一般比较慢，故安装cnpm淘宝镜像来替换npm ​ 全局安装脚手架工具vue-cli，命令如下：npm install --global @vue-cli ​
Vue 教程(三十二)webpack 使用 vue 配置步骤
yuan_xw的专栏
08-10 401
Vue 教程(三十二)webpack 使用 vue 配置步骤 新建一个项目 vue 安装本地 webpack 初始化 npm 配置 webpack.config.js 文件 npm install webpack@3.6.0 --save-dev 初始化 npm npm init 安装 vue npm install vue@2.5.21 --save 配置 webpack.config.js 文件 // 导入Node中path常量 const path = require("pat
创建一个基础的webpack并导入elementUI
brucelpt的博客
01-11 3439
node.js webpack 创建webpack项目 npm init //初始化webpack项目 之后的就是项目名之类的配置，如果没什么特殊需要可以一直回车取默认值,然后输入yes确定配置 生成完成之后，目录下会出现package.json文件，内容就是刚刚配置的项目基础信息 { "name": "elementuitest&a
Vue与webpack的入门
qq_39307758的博客
08-18 232
一、VUE的研究 1.vue.js介绍 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计 为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种 支持类库结合使用时， Vue 也完全能够为复杂的单页应用提供驱动。 渐进式框架：Progress...
Vue中webpack的使用
weixin_43929122的博客
04-04 1518
vue2项目使用webpack,介绍配置过程，以及中途遇到的问题。
vue-element-ui-scaffold-webpack4:vue下基于webpack4构建的多页面、多环境方案脚手架项目（使用了element-ui，可替换为其他）
04-27
vue-element-ui-scaffold-webpack4 注： 目前已升级为webpack5，如需要使用webpack4，可切换分支：git checkout webpack4。 **vue3 + element-ui + webpack5 版本：可切换分支：git checkout vue3 ** 本项目为vue下...
精选资源
vue+element-ui后台完整系统
最新发布
06-25
结合Element UI这一基于Vue 2.0的桌面端组件库，可以快速构建出美观且功能丰富的后台管理系统。Element UI为开发者提供了一系列的预制组件，涵盖了数据表格、表单、按钮、导航等多个方面，极大提高了开发效率并保证...
精选资源
vue-xuAdmin：vue + element-ui-admin后台权限管理模板演示地址：
02-06
vue + element-ui无限级菜单权限管理后台模板 :house: 作者 :bust_in_silhouette: 倪荣旭 电子邮件： 先决条件 节点> = 6.0.0 npm> = 3.0.0 更新日志 v1.2.5 增加DllPlugin优化生成速度，编译速度缩短yarn ...
Vue实战项目：电商管理系统（Element-UI）-vue-shop-admin.zip
11-04
总的来说，这个Vue实战项目展示了如何利用Vue.js和Element-UI构建一个电商后台管理系统，涵盖了前端开发的多个方面，包括组件化、路由、状态管理、API交互、权限控制等。开发者可以借此学习到实际项目中的开发流程和...
精选资源
element-ui 2.15.14, 静态资源版本, 纯HTML可用
02-13
2.15.14版本是Element UI的一个静态资源版本，允许开发者将Element UI的组件以静态资源的形式引入到项目中，即便是在不依赖Vue框架的情况下，通过纯HTML代码也可以使用Element UI的组件，这为开发提供了极大的便利性...
vue项目加webpack相关
weixin_42235173的博客
03-11 1056
webpack配置 webpack.config.js： 'use strict'; const path = require('path') const htmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: { main: './src/main.js' // main是默认入口,也可以是多入口 }, // 出口, 所有产出资源路径 output: {
八、webpack中vue的引入
唐都恩了的博客
03-11 181
#1.安装vue：npm install vue --save 然后在min.js文件中加以引入 html文件中写个div标签id等于app min.js // 使用vue进行开发 import Vue from 'vue' const App = { template: ` <div> <h2>{{message}}</h2> ...
webpack中引用Element-ui
weixin_30869099的博客
02-27 219
1.下载element-ui npm i element-ui --production 2.在main.js中引用 import Element from 'element-ui' import 'element-ui/lib/theme-chalk/index.css'; Vue.use(Element) 3.用element-ui <el-brea...
Vue2.0开发之——webpack安装与配置(01)
我的博客
10-25 2832
什么是webpackwebpack安装webpack配置morewebpack是前端项目工程化的具体解决方案。
Vue之webpack的使用
旺财飞飞飞的博客
11-17 2987
文章目录一、webpack的基本使用 一、webpack的基本使用 webpack的作用：就是把JS相互依赖的模块打包 //下面是模块info.js const name = "张三" const age = 18; export { name, age }; --------------------------------------------- //下面是模块main.js import { name, age } from './info' console.log(name); con
第一个vue程序、webpack的使用
m0_46392290的博客
03-16 181
首先我们先要下载一个node.js,我们可以从官网上进行下载，安装完成之后我们可以在cmd中查看他们的版本， 现在我们给他添加一个国内的镜像，这就相当于maven中我们添加的镜像， npm install cnpm -g 现在我们需要在这基础上添加一个框架vue-cli相当于，我们maven在创建的时候使用骨架中那些模块进行创建。 -g使用全局变量的意思 cnpm install vue-cli -g 安装完成之后我们可以查看一下，我们添加的模块 vue-list 我们可以在自己相对应的文件夹中
webpack 使用 Element-ui 笔记
YHHGQ的博客
11-23 330
一、出现下面报错 Module not found: Error: Can't resolve 'element-ui/lib/style.css' 在对应的文件夹 node_modules/element-ui/lib 新建一个空的 style.css 文件就能解决
VUE2.7项目配置webpack打包-详细操作步骤
CC酱写前端的博客
06-07 3662
Webpack是一个打包工具，可以把JS、CSS、Node Module、Coffeescrip、SCSS/LESS、图片等都打包在一起，因此，现在几乎所有的SPA项目、JS项目都会用到Webpack。GitHub为https://github.com/webpack/ webpack。
Vue webpack引入bootstarp
随芯的博客
03-20 471
Vue webpack引入bootstarp 目录：Vue webpack引入bootstarp参考安装测试结果 参考 安装 错误处理 安装 执行指令 npm install jquery --save-dev 打开项目build目录，向webpack.base.conf.js头添加内容 const webpack = require(‘webpack’) 向module.exp...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值