Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。
Vue
安装
Vue CLI 类似于 IDE 中的 New Project，可以快速创建一个新的工程，
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
# install dependencies
$ npm install
# serve with hot reload at localhost:8080
$ npm run dev
# build for production with minification
$ npm run build
安装时建议使用国内镜像。
npm install -g cnpm --registry=https://registry.npm.taobao.org
项目结构
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
</head>
<body>
<div id="app"/>
</body>
</html>
mian.js
import Vue from 'vue'
// 导入 Hello 组件，并命名为 APP
import APP from './components/Hello'
// 创建实例
new Vue({
// 挂载到 index.html 的 id 为 app 元素
el: '#app',
template: '<APP/>',
components: { APP },
})
// main.js 中的 template 和 components 两个属性不能少
Hello.vue
<template>
<!-- 只能有一个根元素 -->
<p>{{ name }} 你好！</p>
</template>
<script>
// 导出对象
export default {
data () {
return {
name: '世界'
}
}
}
</script>
<style>
p {
color: red
}
</style>
ECMAScript 6 模块系统
无论使用何种编程语言开发大型应用，最关键的特性就是代码模块化。这个概念在不同的编程语言里有着不同的命名，在C里为头部文件，C++和C#里为命名空间，Java中为包，名称不一样但解决的是同一问题。
使用关键字 default，可将对象标注为 default 对象导出。default 关键字在每一个模块中只能使用一次；
关键字export default后可跟随任何值：一个函数、一个类、一个对象字面量，只要你能想到的都可以。
export default {
// ES6 function 函数简写
data () {
return {
name: 'Vue'
}
}
}
Node 模块化方案
module.exports = {
data: function () {
return {
name: 'Vue'
}
}
}
网友评论