webpack-simple模板项目实战

最新推荐文章于 2024-09-01 07:45:30 发布

chengqiuming

最新推荐文章于 2024-09-01 07:45:30 发布

阅读量607

点赞数

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/chengqiuming/article/details/108432596

版权

一项目内结构

1 index.html

2 main.js文件是整个 vue 项目的入口 js

3 App.vue

二 Vue文件的组成部分

三页面设计

四在vue 组件中使用多个 vue 组件搭建一个页面——全局注册

五在vue 组件中使用多个 vue 组件搭建一个页面——本地注册

1 Header.vue、content.vue和bottom.vue文件内容不变

一项目内结构

1 index.html

无论前端页面内容多复杂，index.html都只有11行。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>myvuedemo</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
  </body>
</html>

实际的内容已经被打包进了 /dist/build.js。

2 main.js文件是整个 vue 项目的入口 js

import Vue from 'vue'
// 导入了 APP.vue 组件
import App from './App.vue'

new Vue({
  // 让当前 vue 对象绑定页面上的id是app的那个div
  el: '#app',
  // 让 App.vue 的内容展现在该 div 中
  render: h => h(App)
})

3 App.vue

App.vue 这种以“.vue”为扩展名的文件，实际上就是一个 Vue 对象，这种文件，也称为 Vue 组件。

二 Vue文件的组成部分

<!-- 表示HTML ：template 必须有一个根节点。-->
<template>   
    <div>
    </div>
</template>
<!-- 表示JS -->
<script>
<!-- 暴露一个默认 Vue 对象 -->
export default {
  // 对象名
  name: 'app',
  // 数据部分
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  // 方法部分
  methods:{},
  // 计算属性部分
  computed:{},
  // 监听部分
  watch:{}
}
</script>

<!-- 表示CSS -->
<style scoped>
</style>

三页面设计

最低0.47元/天解锁文章

chengqiuming

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webpack-simple模板项目实战

目录一项目内结构1index.html2main.js文件是整个vue项目的入口js3App.vue二Vue文件的组成部分三页面设计四在vue组件中使用多个vue组件搭建一个页面——全局注册1App.vue2 Header.vue3 content.vue4 bottom.vue5 main.js五在vue组件中使用多个vue组件搭建一个页面——本地注册1Header.vue、content.vue和bottom....
复制链接

扫一扫