Vue.js渐进式 JavaScript 框架
目录什么是Vue.js概念资源 快速搭建框架开发环境实践什么是Vue.js概念中文教程:http://doc.vue-js.com/Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整...
目录
什么是Vue.js
概念
Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
如果你是有经验的前端开发者,想知道 Vue.js 与其它库/框架的区别,查看对比其它框架。
资源
Github:GitHub - vuejs/vue: This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core
Examples:Examples | Vue.js
快速搭建框架
开发环境
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>
如果显示中文乱码,请将App.vue文件另存为选择UTF-8保存。
参考https://www.cnblogs.com/dwj88/p/7606224.html效果:
实践
参考github地址:GitHub - yqrong/vvproject: 搭建项目
更多推荐
所有评论(0)