从零开始学Vue3脚手架 (二) 项目结构

一、vue项目结构

构建脚本目录

public：图标

node_modules：npm 加载的项目依赖模块

src：项目的主要编程代码

        assets：放置静态资源，图片文件、js文件、css文件等 ​

        components：放置小组件（递归）（*）

        router：表示的路由（***）

        views：用户展示的页面（***）

核心文件：

        App.vue：表示我们的主页面（**）

        main.js：是项目的入口（**），vue启动之后需要加载的js文件，设置项目的初始配置、vue对象实例化。

        package.json：依赖第三方js文件的配置文件及一些初始配置

二、文件详解

2.1、main.js

main.js是项目的入口文件，项目中所有的页面都会加载main.js，所以main.js,主要有三个作用： ​         1.实例化Vue。

         2.放置项目中经常会用到的插件和CSS样式。例如： 网络请求插件:axios和vue-resource、图片懒加载插件：vue-lazyload ​

        3.存储全局变量。例如：将axios设置为全局变量

// 导入css文件
import './assets/main.css'
// 导入vue
import { createApp } from 'vue'
// 导入 app.vue 文件
import App from './App.vue'
// 导入路由
import router from './router'

// 实例化 vue 对象
const app = createApp(App)

// 将路由加载到vue实例中
app.use(router)

// 挂载
app.mount('#app')

2.2、App.vue

        App.vue：主组件，App.vue是项目的主组件，页面入口文件 ，所有页面都在App.vue下进行切换，app.vue负责构建定义及页面组件归集，可以理解为所有的路由都是App.vue的子组件。App.vue本质上也是一个js文件，相当于一个模板文件（描述一个组件）。主要包括三个部分模板（结构）、脚本文件、样式
 

<!-- template：在vue文件中编写标签的位置 -->
<template>
	<div id="app">
		<img alt="Vue logo" src="./assets/logo.png">
		<!-- 通过组件别名加载其他的组件；msg 传递到组件中的数据-->
		<HelloWorld msg="Welcome to Your Vue.js App" />
	</div>
</template>

<!-- script：vue页面编写的JavaScript代码的位置 -->
<script>
	// 导入其他的vue文件  import 别名 from vue文件的路径，也是由HelloWorld.vue的export default抛出的
	import HelloWorld from './components/HelloWorld.vue'

	//  export default 的用法：相当于提供一个接口给外界，让其他文件通过 import 来引入使用。
	export default {
		name: 'app', // 只有作为组件选项时起作用
		components: { // 此处component用于挂载从外部导入的vue文件
			HelloWorld // 导入的其他的组件别名
		}
	}
</script>

<!-- script：vue页面编写的样式代码的位置 -->
<style>
	#app {
		font-family: 'Avenir', Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: center;
		color: #2c3e50;
		margin-top: 60px;
	}
</style>

2.3、package.json

package.json：用于设置当前vue项目依赖的第三方插件，项目名，版本

{
  "name": "vue_projects",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    //  --host 0.0.0.0：用于设置当前项目运行通过IP地址进行项目访问
    "dev": "vite --host 0.0.0.0",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.3.4",
    "vue-router": "^4.2.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "vite": "^4.4.6"
  }
}

三、Vue项目运行流程

        Vue3脚手架项目运行之后，首先加载的是：项目根目录的Index.html文件，通过index.index文档中的 <script type="module" src="/src/main.js"></script>到导入src目录中的 main.js 文件，接下来通过main.js 文件中设置的首个vue文件来渲染内容到页面之上。由main.js文件中的首页，进入到项目中的其他的vue文件。

四、我的第一个vue文件

        在vue脚手架的项目中加载vue文件的方式有2种，一种是通过组件的方式，第二种是通过路由的方式。当前案例使用组件的方式为大家进行演示。

 4.1、在 src/components 目录中新建 MyVue.vue文件

<script>
</script>

<template>
  我是一个Test哦~~~
</template>

4.2、在App.vue文件中加载 MyVue.vue 文件

实现步骤：

        1.导入MyVue.vue文件：import 组件名 from 'Vue地址'

        2.将vue文件以组件的方式加载到 js 中：components：{ 组件名 }

        3.通过标签渲染MyVue.vue 文件中的内容：<组件名 />

<script>
// 1.导入Test.vue文件
import Test from '../components/Test.vue'
export default {
  // 2.挂载组件
  components: {
    Test
  }
}
</script>

<template>
  <!-- 3.加载Test -->
  <Test></Test>
</template>