Vue项目结构梳理

作为一个没怎么接触过node、npm和前端框架的后端程序员，在学习开发完一个vue项目后。
对vue项目做一个总结。

首先是整体的项目结构：

vue项目架构设计 vue大型项目架构设计_App

首先是一个坑点：（对于vuecli工具创建的项目）

如果 npm install 的第三方包导入后不能用。卸载这个包，然后去vue ui 界面里面下载插件或者依赖导入。

然后，是src文件夹下的项目结构：

vue项目架构设计 vue大型项目架构设计_项目结构_02

App.vue

项目的入口。

就是访问的第一个页面。

一般情况，会在这里配置真正的首页界面，首页界面会单独立出一个文件。

有路由配置的时候：在这里加入一个路由标签，就会使用路由的页面配置。

还有，这里一般配置全局的css样式。

main.js

配置一些插件或者依赖的导入。

router

路由的配置示例：

path代表网页请求添加的后缀。

name代表这个页面在router的名字，

component指定哪个页面

vue项目架构设计 vue大型项目架构设计_项目结构_03

vue文件的结构

一般情况下，一个vue文件代表一个页面或者组件。

vue有三部分组成：template、script、style

template标签中，写的是html的代码。

script标签中，写的是js代码。

style标签中，写的是css代码。

有效范围都被限定在本文件。

全局函数或者变量的解决方案

css全局样式直接加在App.vue中即可。
全局函数或者变量可以添加一个vue文件。
直接在script中添加。
然后在最后加上 export default { a,b,c,d,... }括号中加上需要用到的全局变量，用逗号分隔。
然后在main.js中，添加全局变量：

import GlobalData from './components/globalData.vue'

Vue.prototype.globalData = GlobalData

需要使用时，this.globalData.a调用即可。