Vue.js（七）

ES6 默认导出（只能一次）与默认导入

默认导出：

	// 当前文件模块为 test.js
	// 定义私有成员 a 和 c
	let a = 10
	let c = 20
	// 外界访问不到变量 d ,因为它没有被暴露出去
	let d = 30
	function show() {}

	// 将本模块中的私有成员暴露出去，供其它模块使用
	export default {
		a,
		c,
		show
	}

默认导入：
    import test from "./test.js"

按需导出（可以多次）与按需导入

按需导出语法 export let s1 = 10
按需导入语法 import { s1 } from './test.js'

export let s1 = 'aaa'

export let s2 = 'ccc'

export function say = function() {}

//同时导入默认导出的成员以及按需导入的成员
import test,{ s1, s2, say } from "./test.js"

直接导入

直接导入并执行代码：
    import "./test.js"

Vue 单文件组件

单文件组件的组成结构：

	template 组件的模板区域

	script 业务逻辑区域

	style 样式区域

<template>
	<!-- 这里用于定义Vue组件的模板内容 -->
</template>

<script>
	// 这里用于定义Vue组件的业务逻辑
	export default {
		data: () { return {} },	//私有数据
		methods: {}	//处理函数
	// ... 其它业务逻辑
	}
</script>

<style>
	/* 这里用于定义组件的样式 */
</style>

Vue 脚手架

安装 3.x 版本的 Vue 脚手架：

	npm install -g @vue/cli

基于脚手架创建项目：
	// 1. 基于 交互式命令行 的方式，创建 新版 vue 项目
	vue create my-project
	// 2. 基于 图形化界面 的方式，创建 新版 vue 项目
	vue ui
	// 3. 基于 2.x 的旧模板，创建 旧版 vue 项目
	npm install -g @vue/cli-init
	vue init webpack my-project