vue的HelloWorld项目结构分析、实现自己的一个简单Vue应用、render函数的理解、修改main.js名称为app.js

Bulut0907

于 2024-08-30 09:07:58 发布

阅读量513

点赞数 8

分类专栏： Vue 文章标签： vue.js 项目结构分析 render函数的理解修改main.js 实现一个简单Vue应用

本文链接：https://blog.csdn.net/yy8623977/article/details/132003050

版权

Vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1. vue的HelloWorld项目结构分析

使用vue create vue-project创建的HelloWorld项目结构如下：

HelloWorld项目结构

public/favicon.ico: 文件位置和名称不要修改
public/index.html：首页，文件位置和名称不要修改。谷歌浏览器可以在chrome://settings/content/javascript设置关闭javascript功能进行测试。不需要我们自己在index.html引入vue.js和main.js，脚手架会自动帮我们引入

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <!-- 针对IE浏览器的一个特殊配置。让IE浏览器以最高的渲染级别渲染页面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 开启移动端的理想视口 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 配置页签图标。BASE_URL就是public目录 -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- 配置网页标题。通过webpack插件从package.json加载项目name -->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <!-- 如果浏览器不支持js，则显示这句话 -->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

src目录：目录位置和名称不要修改
src/main.js：这个项目的程序入口文件，文件位置和名称一般不要修改。有的项目会命名为app.js或index.js。也可以使用import App from './App'

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

Vue.config.productionTip = false

new Vue({
  render: h => h(App),    // render函数将App组件放入容器中
}).$mount('#app')    // 和id=app的容器绑定

src/components/App.vue：所有组件的父组件。这里export default使用的是默认暴露，还有分别暴露和统一暴露

<template>
  <div id="app">
    <!-- logo图片 -->
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

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

babel.config.js：babel的配置文件。里面的内容一般用官方提供的配置就可以了
package.json：项目的描述和配置文件。如下描述了项目名称、版本、脚本命令(build: 将.vue文件编译成html、css、js文件；init：语法检查)、dependencies依赖

{
  "name": "vue-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^2.6.14"
  },
  ......省略部分......
}

package-lock.json：依赖包的管理，比如版本管理

2. 实现自己的一个简单Vue应用

public/index.html和src/main.js我们使用前面创建的项目的

删除src/App.vue、src/components/HelloWorld.vue组件，然后我们新建我们自己的组件

2.1 src/components/School.vue组件

需要在vue.config.js中添加lintOnSave: false关闭语法检查。或者name属性用MySchool等名称，不然会报错

<template>
	<div class="demo">
		<h2>学校名称：{{name}}</h2>
	</div>
</template>

<script>
  export default {
    name:'School',
		data(){
			return {
				name:'第一中学'
			}
		}
	}
</script>

<style>
	.demo{
		background-color: orange;
	}
</style>

2.2 src/components/Student.vue组件

<template>
	<div>
		<h2>学生姓名：{{name}}</h2>
	</div>
</template>

<script>
  export default {
		name:'Student',
		data(){
			return {
				name:'张三'
			}
		}
	}
</script>

2.3 src/App.vue组件

<template>
	<div>
    <img src="./assets/logo.png" alt="logo">
		<School></School>
		<Student></Student>
	</div>
</template>

<script>
	// 引入组件
	import School from './components/School.vue'
	import Student from './components/Student.vue'

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

2.4 测试

运行程序，页面如下：

实现自己的一个简单Vue应用

3. render函数的理解

main.js的内容如下：

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

Vue.config.productionTip = false

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

import Vue from 'vue'导入的这个是vue的runtime build，由vue/package.json的module属性值dist/vue.runtime.esm.js决定，不包含template解析器。可以使用如下方法之一进行解决

可以换成: import Vue from 'vue/dist/vue'。使用完整版的vue
可以使用render函数: render: h => h(App)。由render函数帮我们进行main.js的template解析

render函数的基本使用

render由vue帮我们自动调用，会传入一个createElement函数进行template解析。而其它组件的template解析，由项目定义的package.json的devDependencies的vue-template-compiler进行解析
如果是App组件，直接传入App组件，就相当于注册App组件然后使用App组件

import Vue from 'vue'

Vue.config.productionTip = false

new Vue({
  // render: h => h(App)
  render(createElement) {
    return createElement('h1', '你好啊')
  }
}).$mount('#app')

页面显示如下：
render基本使用

vue/dist目录说明：

vue/dist的目录如下：
vue/dist目录

vue.common.xxx: 使用common.js进行模块化时使用
vue.runtime.esm.js：Vue默认让我们使用vue.runtime.esm.js，这个包含vue的核心功能，但是不包含template解析器，因为template解析只需要在编译的时候使用，而运行的时候不需要，可以减少打包后的文件大小
vue.runtime.js：vue.runtime.esm.js不能直接在浏览器运行，因为有ES6语法，浏览器解析不了。而vue.runtime.js可以直接在浏览器运行。如下所示。单独的一个html文件，引用了vue.runtime.js，直接运行，浏览器显示hello

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javaScript" src="./node_modules/vue/dist/vue.runtime.js"></script>
</head>
<body>

<div id="root">
</div>

<script type="text/javascript">
    new Vue({
        el:'#root',
        render(h){
            return h('h1', 'hello')
        }

    })
</script>

</body>
</html>

vue.runtime.mjs：在vue.runtime.js上进行了压缩

4. 修改main.js名称为app.js

Vue的项目底层还是用webpack进行打包的，webpack的配置文件是webpack.config.js，这个配置文件我们访问不到

可以使用命令查看这个配置文件的内容

D:\正使用文件\vue-project>vue inspect > test.js

D:\正使用文件\vue-project>

test.js的文件内容如下。可以看到默认的程序入口，就是src/main.js

{
......省略部分......
  entry: {
    app: [
      './src/main.js'
    ]
  }
}

在Vue中我们可以通过vue.config.js对webpack的一些配置进行配置。能配置的参数参考vue-cli配置参考页面

修改main.js为app.js的配置如下。该js文件使用的是common.js模块化语法。修改后需要重新运行cnpm run serve命令重启服务

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  pages: {
    index: {
      entry: 'src/main.js'
    }
  }
})

Bulut0907

关注

8
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
vue的HelloWorld项目结构分析、实现自己的一个简单Vue应用、render函数的理解、修改main.js名称为app.js

导入的这个是vue的runtime build，由vue/package.json的module属性值dist/vue.runtime.esm.js决定，不包含template解析器。Vue的项目底层还是用webpack进行打包的，webpack的配置文件是webpack.config.js，这个配置文件我们访问不到。在Vue中我们可以通过vue.config.js对webpack的一些配置进行配置。public/index.html和src/main.js我们使用前面创建的项目的。
复制链接

扫一扫

专栏目录