iview大体上可以分为两种使用方式:
1,直接使用script引用iview的js。
2,使用iview提供的脚手架。
第一种方式使用iview和vue比较简单,适合刚上手vue和iview的小伙伴。
第二种方式iview已经为我们提供了非常精彩的iview脚手架实例。
下载实例后,你需要安装node。
之后在含有package.json这个文件执行命令。
安装依赖:
npm install
第一次执行的话需要额外执行:
npm run init
然后是
npm run dev
文件分析
package.json文件中是我们安装的各种依赖。也就是说你的页面需要用到的各种依赖包都在这个文件中统一进行了管理。
scripts属性中自定义了很多命令。当然我们自己也可以添加我们自己想要的命令或者去修改原有的命令。
命令行下使用npm run 自定义命令 就可以执行这段脚本。
我们上面执行的 npm run dev 就是实例中为我们定义好的脚本命令。他实际上执行了一个webpack命令。在当前文件夹下找到buid文件夹下的webpack.dev.config.js。这就是npm run dev最终会执行的文件。
我们简单分析一下这个文件。
fs.open这个方法中的buf变量会改变当前文件夹下的env.js。而env.js中有一个全局的变量,这个变量是用来判断当前环境是开发环境或是正式环境的,所以我们可以根据这个变量在程序中做出一些有用的判断。
module.exports 下的output我们也需要注意一下。
其中publicPath是发布的时候我们的程序在哪个路径下找js文件。
整个项目中有几个很重要的部分。我们来逐一分析。
libs下面的util.js中有一些公用的js方法,我们自己定义的方法也可以放在这。
router是项目中的所有路由。其中的index.js定义了路由跳转前和跳转后执行的方法。可以在跳转前进行权限判断。
而router.js中是项目中所有的路由。如果想要在项目中进行路由跳转需要在这个js中定义。
store下是使用vuex进行数据存储的地方。实例中存储了打开的页面tab数据。
views下面是自定义的所有的vue和less文件了。
接下来我们来看看在自定义vue中的一些细节。
写完模板之后如果我们还需要引用额外的模块的话可以在<script></script>之间import我们想用的模块,比如我们的通用方法会放在util.js中这时候我们需要
import Util from '@/libs/util';
然后在后面就可以使用util了,其中的@是我们在webpack中定义了的路径,相当于项目路径。
如果我们有一些数据希望存放在一个js中供其他vue调用。这时候可以
import * as table from './data/search';
使用table可以取到search文件中的数据。
vue中数据的传递有几种方式:
1、vuex(store下的文件)
2、路由传值(在路由中通过参数传值)
3、父子组件传值
4、eventbus传值
我们可以根据不同的情况使用不同的方式。