项目创建完成之后,接下来就需要用适合自己的开发工具,来加载项目,同时理解项目各文件夹代表的含义。
1.开发工具选择
每个人都有自己习惯的前端开发工具,我选择了VSCODE,主要之前没用过,想体验下。
进入VSCODE下载网站:https://code.visualstudio.com/
下载对应版本的操作系统安装包到本地安装。
安装完成之后,直接打开Visual Studio Code,在文件-打开文件夹,选择我们创建的项目文件夹D:\soft\space\speed,即可打开该项目。
2.VUE项目各文件夹含义
build 文件夹,用来存放项目构建脚本
config 中存放项目的一些基本配置信息,最常用的就是端口转发
node_modules 这个目录存放的是项目的所有依赖,即 npm install或者cnpm install命令下载下来的文件
src 这个目录下存放项目的源码,即前端开发者写的代码放在这里
static 用来存放静态资源,如图片资源等
index.html 则是项目的首页,入口页,也是整个项目唯一的HTML页面
package.json 中定义了项目的所有依赖,包括开发时依赖和发布时依赖
assets 目录用来存放资产文件
components 目录用来存放组件,也可以在其中自定义文件来归来存放自己公用的一些组件或者单页面,推荐在 components 中存放组件,另外单独新建一个 page 文件夹,专门用来放完整页面。
router 目录中,存放了路由的js文件
App.vue 是一个Vue组件,也是项目的第一个Vue组件
main.js相当于Java中的main方法,是整个项目的入口js