（1）vue入门--目录讲解

Love The Way You Lie 2023-02-12 15:22 46阅读 0赞

> 项目使用vue-cli创建

# 一、vue程序启动加载过程 #

1.程序首先加载main.js  
2.main.js创建一个vue实例，并把实例挂载到id=app上,这个id=app会映射到app.vue（创建）  
3.启动时，首页加载index.html，根据id=app找到app.vue（使用）  
4.在app.vue里，根据router-view渲染页面

# 二、目录结构解析 #

![在这里插入图片描述][20200526154823893.png]

bulid：项目打包相关  
config：项目的配置目录  
node\_moudules：npm install时安装的依赖  
src：开发目录  
![在这里插入图片描述][20200526154838463.png]

static：静态资源  
test：测试目录（我创建的时候没选测试，所以这个里面没有）  
.eslint相关：语法检测用的  
index.html：首页的入口  
package.json：依赖文件的版本（包管理）

# 三、关键文件讲解 #

### 1.main.js ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ_size_16_color_FFFFFF_t_70]

new Vue:创建vue实例  
el:此实例管理的区域，app指index.html中id=app的dom元素  
router:将router挂载在这个实例中  
components:组件 app.vue  
templete:模板

### 2.Index.html ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ_size_16_color_FFFFFF_t_70 1]

id=”app”：页面的挂载点，dom元素，整个页面挂载在app这个dom元素下

### 3.App.vue ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ_size_16_color_FFFFFF_t_70 2]

这个对应首次启动vue打开的页面，如下图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ_size_16_color_FFFFFF_t_70 3]

img就是vue的图标logo  
router-view是动态路由组件，图标下面的内容由动态路由控制。

### 4.router/index.js ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ_size_16_color_FFFFFF_t_70 4]

这个地方把路由export出来，供其他地方调用。  
再来看components/HelloWorld.vue  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ_size_16_color_FFFFFF_t_70 5]

这个就是app.vue动态路由组件里的所有内容，由一大堆链接组成，就是vue图标logo下的那些超链接

[20200526154823893.png]: https://img-blog.csdnimg.cn/20200526154823893.png
[20200526154838463.png]: https://img-blog.csdnimg.cn/20200526154838463.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200526154847831.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200526154859155.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200526154907828.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200526154916392.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200526154928601.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200526154939590.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmd1b2ZlaQ==,size_16,color_FFFFFF,t_70