编写项目入口

# 二. 编写项目入口

# 1 编写 index.html

在项目根目录下创建一个 index.html, 作为项目主页文件, 编写如下内容

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>从零开始打造Todo应用</title>
  </head>

  <body>
    <div id="app"></div>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13

演示

# 2 编写 vue 根实例

创建 src 目录. 在 src 目录下创建 main.js 作为项目的总入口文件

在 main.js 中, 完成如下操作

创建 vue 根实例
挂载 App 组件

# 1) 安装 vue

执行npm install vue安装 Vue

演示

会发现在 package.json 中多了上图所示的内容

# 2) 创建 Vue 根实例

编写 main.js

示例

// 从vue包中导入Vue对象
import Vue from 'vue'

// 创建Vue根实例
new Vue({
  el: '#app',
})

1
2
3
4
5
6
7

演示

2021 年更新

vue 也可以使用 runtime 的版本. 编辑 main.js

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: (h) => h(App),
}).$mount('#app')

1
2
3
4
5
6

# 3) 挂载 App 组件

# Step1 编写 App.vue 文件

示例

<template>
  <div>this is App</div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style scoped></style>

1
2
3
4
5
6
7
8
9
10
11

演示

# Step2 挂载到根实例

在 main.js 中, 完成如下操作

导入 App 组件对象
挂载到 Vue 根实例

示例

// 从vue包中导入Vue对象
import Vue from 'vue'

// 导入App组件对象
import App from './App.vue'

// 创建Vue根实例
new Vue({
  el: '#app',
  components: {
    // 组件名: 组件对象
    App: App,
  },
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14

演示

在 ES6 中, 当键名和值名相同时, 代码可以这样简写

components: {
  App
}

1
2
3

# Step3 使用 App 标签渲染

示例

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
})

1
2
3
4
5

演示

这里的 App 相当于在 components 中定义的组件名

# 3 引入 main.js 测试

在 index.html 主页文件中引入 main.js, 测试, 发现报错!!!

如果觉得有帮助, 可以微信扫码, 请杰哥喝杯咖啡~

#webpack4 #前端工程化

上次更新: 2021/09/03, 15:32:17

← 项目初始化 webpack基本配置→