VUE—简单认识

写在头头儿

知道vue的存在是刚刚出来工作时候，第一眼看到“哇”好巧哦，跟在家用的angular一样，上来就用超级开心的！
公司为什么选vue呢？先做个简单的对比吧！
angular比vue强大、也难。适合大项目多人员的开发。强大主要是引入组件和第三方库比较多，自然实现的功能比vue多了，就强大了哦。这样问题也有了，遇到问题就不好解决了，这就是说难的原因了。
vue轻量级框架，简单易学，没有任何依赖。
各有个的优缺点，只是介绍我知道的这部分，公司是根据本公司的现状考虑使用了vue，原因。
1、入门简单：公司的开发小组没有接触过前后端分离的框架，vue比angular好上手。
2、中文文档多：开发时或后期维护的时候遇到问题能有解决方案并且不耽误项目能很多好的解决问题。

讲一讲vue的快速入门。

引入 iView
在项目的入口页面 main.js 中配置：

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from 'components/app.vue';
import Routers from './router.js';
import iView from 'iview';
import 'iview/dist/styles/iview.css';

Vue.use(VueRouter);
Vue.use(iView);

// The routing configuration
const RouterConfig = {
    routes: Routers
};
const router = new VueRouter(RouterConfig);

new Vue({
    el: '#app',router: router,render: h => h(App)
});

按需引用
借助插件 babel-plugin-import可以实现按需加载组件，减少文件体积。首先安装，并在文件 .babelrc 中配置：

npm install babel-plugin-import --save-dev

// .babelrc
{
  "plugins": [["import",{ "libraryName": "iview","libraryDirectory": "src/components" }]]
}

然后这样按需引入组件，就可以减小体积了：

import { Button,Table } from 'iview';
Vue.component('Button',Button);
Vue.component('Table',Table);

特别提醒
按需引用仍然需要导入样式，即在 main.js 或根组件执行

import 'iview/dist/styles/iview.css';

组件使用规范
使用:prop传递数据格式为数字、布尔值或函数时，必须带:(兼容String除外，具体看组件文档)，比如：

Correct usage:
<Page :current="1" :total="100"></Page>

Incorrect usage:
<Page current="1" total="100"></Page>

在非 template/render 模式下（例如使用 CDN 引用时），组件名要分隔，例如 DatePicker 必须要写成 date-picker。
以下组件，在非 template/render 模式下，需要加前缀 i-：

Button: i-button
Col: i-col
Table: i-table
Input: i-input
Form: i-form
Menu: i-menu
Select: i-select
Option: i-option
Progress: i-progress

以下组件，在所有模式下，必须加前缀 i-，除非使用

iview-loader：
Switch: i-switch
Circle: i-circle

相关推荐