vue目录结构

vue

vue安装与部署项目：

参考地址：https://blog.csdn.net/marslover521/article/details/80938686

• vue开发环境运行：

npm run dev

• vue生产环境打包：

npm run build

---

vue-cli:vue的脚手架工具

作用：目录结构，本地调试，代码部署，热加载，单元测试。

---

vue项目根目录下文件作用：

index.html文件：文件入口

package.json文件：每个项目的根目录下面，一般都有一个package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install 命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境，package.json 中添加中文注释会编译出错。

build文件夹：
(1)webpack.base.conf.js文件：参考地址https://blog.csdn.net/g229191727/article/details/80627229

config文件夹：
(1)index.js文件：host属性后设置的是访问端口号(localhost / 127.0.0.1 / IP).

server文件夹：
(1)api文件夹：接口文件夹
(2)db.js文件：链接数据库文件，其中包含数据库的端口，用户名，密码，数据库等信息
(3)index.js文件：监听端口文件
(4)sqlMap.js文件：sql查询数据文件

src文件夹：
(1)assets文件夹：存放项目中所需要的静态资源(css/img/js).
(2)componts文件夹：组件.
(3)router文件夹：路由.
(4)App.Vue文件：主组件，应用组件(自己写的组件)，App.Vue是启动页面.
(5)main.js文件：main.js是全局配置页面，全局注册组件也在这个文件，是入口文件，主要作用是初始化vue实例，并引入所需要的插件.

static文件夹：
(1)js文件夹：存放第三方js的文件夹，插件在根目录下的index.html中标签内可以引入.
(2)img文件夹：存放第三方js插件中使用到的图片.

---

vue引入插件的方法：https://blog.csdn.net/csdn_yudong/article/details/78795743
(1)<script src="static文件内插件"></script>，全局可用，该方法只能引入static文件夹下的第三方插件，一般在vue中未包含的插件使用该方法
(2)import Heatmap from 'heatmap.js';在使用该插件的vue文件中或者main.js文件中引入第三方插件，引入的插件在node_moudle中已经存在的前提下

---

vue引入css文件的方法：
(1)<link href="static文件内文件" />全局可用，该方法只能引入static文件夹下的文件
(2)import '@/assets/css/style.css'/*引入公共样式*/全局可用，在main.js入口文件中可以使用该种方法
(3)@import '../assets/css/style.css';全局可用，在vue文件中的style标签内使用

---

vue引入图片的方法：
(1)在vue文件中img标签引入图片，图片链接在data数据中require引入，在标签中以:src="参数"方式传入参数，图片放在assets文件夹内

(2)在vue文件中以背景图片方式引入，图片放在assets文件夹内

(3)在assets文件夹内的css文件中以背景图方式引入，图片放在assets文件夹内