在cli脚手架下 vue + iview项目构建(适用于后台管理系统!)

1.安装nodejs 和 npm (这里不做赘述,不懂的可以自己百度)

2.全局安装 vue-cli(如果以前安装过就调过这步,如果没安装请安装,没安装执行第3步会提示你安装)

$ npm install --global vue-cli

3.创建一个基于 webpack 的vue项目

$ vue init webpack vue-iview-master // 后续按回车安装默认即可


4.进入到创建的vue项目

$ cd test

5.安装依赖

$ npm install

6.安装iview

$ npm install iview --save

7.配置依赖

用编译器打开项目,进入src,找到main.js,用下面的代码替换掉main.js的初始代码

import Vue from ‘vue’

import iView from ‘iview’

import App from ‘./App’

import ‘iview/dist/styles/iview.css’

Vue.config.productionTip = false;

Vue.use(iView);

/ eslint-disable no-new /

new Vue({

el: ‘#app’,

components: { App },

template: ‘’

})

8.运行(如果不需要安装iview,就放弃6和7步)

$ npm run dev


9.如果你的8080端口没有被占用应该是这样的,在浏览器输入地址

,被占用就用出来的地址,

如果你没有任何改动,页面应该是这样的


10.这时候我们就可以使用iview了

找到项目的src ,找到components文件夹下面的HelloWorld.vue,

打开iview的官网

用组件,

把template里的代码复制进去(具体看iview的文档,我用最简单的举个例子!)



现在去网页上看看效果



很显然,效果出来了

OK,更复杂的要自己去看文档学习了

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容