初入Vue（一）

前言

本片来源于需求，在拿到需求到交付给需求方到交付给用户的过程中，经历了一系列的困难，也解决了一系列的困难，也收获满满。

上手一个Vue项目想了解的很多，但是少不了如下几点：

开发工具VSCode以及常用的插件

创建新项目

首先全局安装脚手架：

npm install -g @vue/cli

然后搭建一个空项目

vue create report

然后选择一系列的配置最终生成了一个新项目

执行如下命令，即可运行：

npm run serve

这样就可以看到这个Vue-cli给我想看到的一个初始页面了，里面的功能很多，具体的可以仔细看下。下面我们来看下这个项目的目录结构：

目录结构

report

├─ .git git管理工具

├─ .gitignore git忽略文件

├─ GitHooks.sh 针对提交代码的时候做一些限制，比如代码中含有console.log禁止提交

├─ README.md 本项目一些简要重点内容说明，一般都是空白，靠开发人员填写

├─ babel.config.js 默认的babel配置文件

├─ jsconfig.json 默认文件，里面是一些项目的依赖配置

├─ package-lock.json 三方依赖文件的安装版本

├─ package.json 项目配置文件，还有一些脚本

├─ public 项目Html文件入口，还可以存放不参与编译的静态资源

│ ├─ favicon.ico

│ └─ index.html

├─ src 开发过程中最常使用到文件夹

│ ├─ App.vue 项目的根组件

│ ├─ assets 图片库

│ │ └─ logo.png

│ ├─ components 自定义组件库

│ │ └─ HelloWorld.vue

│ ├─ main.js js入口文件

│ ├─ router 路由管理

│ │ └─ index.js

│ ├─ store 状态管理

│ │ └─ index.js

│ └─ views 页面

│ ├─ AboutView.vue

│ └─ HomeView.vue

└─ vue.config.js 项目配置，再运行项目的时候会优先加载这个文件中的配置，比如配置代

理，路径别名等等

组件

这个项目中的组件大致可分为3类：

1.第三方UI组件库

element(Vue)，Ant Design (React)，图表库 echarts ，手机UI组件 vant等等

2.自定义组件

这里是指在开发过程中封装的一些 基础组件和业务组件，存在与 src/components/ 文件夹下