欢迎光临我的博客[http://poetize.cn],前端使用Vue2,聊天室使用Vue3,后台使用Spring Boot
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