Vue.js渐进式 JavaScript 框架- 前端开发

什么是Vue.js

概念

资源

快速搭建框架

开发环境

实践

什么是Vue.js

概念

中文教程：http://doc.vue-js.com/

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

如果你是有经验的前端开发者，想知道 Vue.js 与其它库/框架的区别，查看对比其它框架。

资源

Github:https://github.com/vuejs/vue

Examples:https://vuejs.org/v2/examples/

快速搭建框架

开发环境

1.安装webpack

npm install -g webpack

2.安装vue-cli

vue-cli是什么？vue-cli 是vue.js的脚手架，用于自动生成vue.js模板工程的。

安装vue-cli：

npm install -g vue-cli

使用vue-cli构建项目

vue init webpack your-project-name  //创建一个基于webpack模板的名为your-project-name的项目

目前可用的模板包括：

browserify –全功能的Browserify + vueify，包括热加载，静态检测，单元测试。
browserify-simple–一个简易的Browserify + vueify，以便于快速开始。
webpack–全功能的Webpack + vueify，包括热加载，静态检测，单元测试。
webpack-simple–一个简易的Webpack + vueify，以便于快速开始。

安装项目依赖：


cd your-project-name    //进入项目目录
npm install        //安装项目依赖
npm run dev        //运行项目
npm run build      //发布项目

此时在浏览器打开：localhost:8080即可看到欢迎页。

3.安装element-ui

http://element-cn.eleme.io/#/zh-CN

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库.

安装element-ui:

npm install element-ui -S

添加引用配置：

在main.js文件中加入


 
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
 
 
Vue.use(ElementUI)

4.修改App.vue


<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>{{ msg }}</h1>
    <el-button @click.native="startHacking">Let's start Vue element-ui</el-button>
    <div class="block">
    <span class="demonstration">显示默认颜色</span>
    <span class="wrapper">
    <el-button type="success">成功按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
    <el-button type="info">信息按钮</el-button>
    </span>
    </div>
    <br/>
    <div class="block">
      <span class="demonstration">hover 显示颜色</span>
    <span class="wrapper">
    <el-button :plain="true" type="success">成功按钮</el-button>
    <el-button :plain="true" type="warning">警告按钮</el-button>
    <el-button :plain="true" type="danger">危险按钮</el-button>
    <el-button :plain="true" type="info">信息按钮</el-button>
    </span>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      msg: 'Use Vue 2.0 Today!'
    }
  },
 
  methods: {
    startHacking () {
      this.$notify({
        title: 'It Works',
        message: 'We have laid the groundwork for you. Now it\'s your time to build something epic!',
        duration: 6000
      })
    }
  }
}
</script>
 
<style>
body {
  font-family: Helvetica, sans-serif;
}
</style>