菜鸟入门vue和ElementUI

今天将使用vue+elementUI第一次搭建项目的过程记录下来(Mac电脑)前提条件:电脑上已经装过npm/cnpm

在本地先新建了一个存储项目的文件夹,比如:test。或者直接在c盘d盘都可以

在终端/命令行里面进入这个地址 cd test

vue init webpack-simple element-demo

这里会让输入 项目名称、介绍、作者之类的,直接按enter键就可以 还会询问是否使用sass,选择no/yes均可,看你需要cd element-demo 进入项目npm installnpm install style-loader -S —-用来解析css的,必须安装npm i element-ui -D 补充:i-> install D-> –save-dev S-> –save 如果怕端口号冲突,可以修改,在package.js的dev后面添加 –port 8099 就可以(8099自己随便定义的)

"scripts":{ "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --port 8099", "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" }

在main.js中引入elementui

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

然后npm run dev,发现报错

错误信息.png 解决方案:webpack.config.js添加配置

{test: /\.(eot|svg|ttf|woff|woff2)$/, loader: 'file-loader' }

配置完config.js后,ctrl+c结束命令,再执行npm run dev

成功!!

©️李联华的博客网 当前IP地址:3.233.242.67,欢迎您的访问!

温馨提示 : 非特殊注明,否则均为李联华的博客原创文章,本站文章未经授权禁止任何形式转载
文章链接:https://www.ooize.com/beginner-vue-and-elementui.html

订阅文章

在下面输入您的电子邮件地址以订阅我们的文章

订阅
提醒
guest

0 评论
内联反馈
查看所有评论
Loading...