ElementUI+Vue+Webpack的填坑经历

1 新建一个文件 

vue init webpack-simple element-demo
ElementUI+Vue+Webpack的填坑经历_第1张图片

2 进入这个文件里面,继续装element-ui

npm i element-ul -D
//这里的i指的是install
//-D 指的是--save-dev
ElementUI+Vue+Webpack的填坑经历_第2张图片

3 继续添加依赖

 cnpm install
ElementUI+Vue+Webpack的填坑经历_第3张图片

4 继续装css-loader, style-loader,因为webpack中自带css-loader,所以在这里只下载style-loader就好了

 npm install css-loader style-loader -D
ElementUI+Vue+Webpack的填坑经历_第4张图片

下载成功后,在package.json文件中,能看到如下效果

ElementUI+Vue+Webpack的填坑经历_第5张图片

5 配置webpack-config.js

ElementUI+Vue+Webpack的填坑经历_第6张图片

6 在 main.js中导入elementUI的相关路径,记得一定将Vue.use(ElementUI)应用到VUE中;

ElementUI+Vue+Webpack的填坑经历_第7张图片

7 在命令行中运行:

npm run dev
ElementUI+Vue+Webpack的填坑经历_第8张图片

8 在浏览器中打开:localhost:port

ElementUI+Vue+Webpack的填坑经历_第9张图片

你可能感兴趣的:(ElementUI+Vue+Webpack的填坑经历)