webpack+vue+iview使用vue-cli脚手架搭建

Posted 相心

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack+vue+iview使用vue-cli脚手架搭建相关的知识,希望对你有一定的参考价值。

1.安装nodejs环境

下载node.js。安装成功后再控制台输入 node -v 出现版本号则,安装成功。

如果没有出现 版本号 而是出现node 不是内部命令的话 需要配置一下环境变量,如果已经出现版本号,此步骤可以忽略。将安装node的路径剪切,右键我的电脑-->属性-->高级系统环境设置-->环境变量-->找到path环境变量。加上复制的node的安装路径。

 

2.可以在控制台在输入一下命令,查看是否已经成功的安装了npm   npm -v  如果出现版本号说明已经安装成功,

 

3.下面我们就可以进行,vue 的脚手架的安装了 也就是vue-cli,在控制台输入 npm install -g vue-cli (注意:尽量使用全局安装),等待完成安装即可。

 

4.我们使用webpake模板生成一个项目   vue init webpack 文件名称,出现如下时显示安装成功

 

5.安装包依赖   npm install  

6.当安装完成后 我们执行,npm run dev 进行运行。如果控制台有出现下面情况说明项目已经启动起来了

浏览器输入localhost:8080时,出现如下的界面:

 

那么vue我们搭建好了,现在开始集成iview

7.使用脚手架安装iview    npm install iview save   

8.成功后添加iview-loader加载器  npm install iview-loader --save-dev

以上是关于webpack+vue+iview使用vue-cli脚手架搭建的主要内容,如果未能解决你的问题,请参考以下文章

iview使用vue-i18n实现国际化

解决webpack+Vue引入iView找不到字体文件的问题

使用vue1.0+es6+vue-cli+webpack+iview-ui+jQuery 撸一套高质量的后台管理系统

iview 打包Icon不显示问题修复

vue-cli+webpack+router+vuex---之vuex使用

vue如何在 Vue-cli 创建的项目中引入 iView