vue学习笔记之项目结构分析（二）

@Candy vue学习笔记之项目结构分析（二）

第一步

以3.0及以上版本为例，以下为基础的项目结构图：

1、public 目录下是vue 项目整个程序入口，一个index.html文件中只包含一个id为app的空div块，views文件夹下的内容会根据配置加载到index.html文件中。index.html文件原则上不做修改。
vue 3.0生成的项目，在public文件夹中的文件打包后仍然可以修改。vue2.9及以下版本生成的项目，在static文件夹中的文件同理。对于一些打包后仍然需要修改的参数，如后台url 等，应该写一个单独的js文件，放在以上的目录中。
1.1 写一个js文件，在问价中暴露公共属性：(url.js)

export const httpUrl="http://10.88.44.142:8080";

1.2 在main.js中引用并且定义为prototype:

import {httpUrl} from '../public/url';
Vue.prototype.httpUrl=httpUrl;

1.3 在vue文件中使用：

var socket = new SockJS(this.httpUrl + "/ws");

2、src 目录下包含三个文件夹assets用来放背景图。components中定义组件。views中定义视图。视图是由一个或多个组件组成的。js和css文件可以放在assets下，也可以和assets文件夹并列。
package.json文件：dependencies和devDependencies两个标签可以查看项目已经导入了哪些依赖。其他标签的含义后续补充。
main.js文件：主要的配置文件，引入了一些公共的组件，比如vue、router和store。（router和store的作用还有待补充）；实例化了一个vue ，通常一个项目只能有一个实例化vue。（具体原因还有待补充）比如后期需要引入vuex和iview等，都是可以在该文件中配置的。
router.js文件：配置动态路由的文件，比如配置“/”跳转到登录页。
store.js文件： vuex的相关配置。（此知识点后续会出专题详细讲解）

vue 项目加载的过程：首先加载index.html文件中的div组件，根据id 值会找到相同id的vue组件，App组件中展示的内容是根据动态路由来加载的。动态加载路由，需要使用标签：。根据匹配router.js中的路径和vue组件的对应关系，来动态的将不同的组件挂载到App组件中。