Vue CLI 命令行工具

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

mian.js

import Vue from 'vue'
// 导入 Hello 组件，并命名为 APP
import APP from './components/Hello'

// 创建实例
new Vue({
// 挂载到 index.html 的 id 为 app 元素
el: '#app',
template: '',
components: { APP },
})

// main.js 中的 template 和 components 两个属性不能少

Hello.vue

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'
        }
    }
}

参考资料

• 文中链接
• 深入浅出ES6（十六）：模块 Modules
• 全面解析ECMAScript 6模块系统
• ECMAScript 6 入门
• Node.js中exports与module.exports的区别