Vue.js
脚手架
Vue 提供了一个脚手架工具,帮助我们快速搭建本地项目:vue-cli
https://cli.vuejs.org/zh/
安装
npm install -g @vue/cli
# OR
yarn global add @vue/cli
创建项目
vue-cli 提供了两种使用方式
- 命令行
- UI
# 命令行
vue create 项目名称
# UI
vue ui
运行命令以后,根据提示进行选择
目录结构
- node_modules/
- public/
- src/
- assets/
- components/
- app.vue
- main.js
- ...
单文件组件
vue 也是基于组件的开发模式,我们知道一个 UI 组件包含
- 结构
- 样式
- 行为
为了能够更加方便的编写组件,vue 提供了一个特殊的组件定义文件:.vue 文件,我们也称为 单文件组件
组成
一个单文件组件的 结构、样式、行为 分别通过三个标签来进行定义和划分
- <html>
- <script>
- <style>