前端杂货铺Vue.js专区Vue.js

Vue CLI 命令行工具

2016-12-21  本文已影响180人  _10_01_

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'
        }
    }
}
参考资料
上一篇 下一篇

猜你喜欢

热点阅读