前端项目结构介绍与Vue-cli(脚手架)环境搭建

传统的前端项目结构

一个项目中有许多html文件

每一个html文件都是相互独立的

如果需要在页面中导入一些外部依赖的组件(vue.js,elementUI),就需要在每一个html文件中引用都导入,十分的麻烦

而且这些外部组件都需要在其官网中自行下载,也增加了导入的繁琐程度

当今的前端项目结构

在一个node环境中构建项目,node(前端的开发环境)类似与后端中使用的maven,可以帮我们下载项目中需要使用的js/css文件

前端改变为单页面架构(一个项目中只有一个html文件),方便配置

所有的配置都是对这一个html文件进行配置的,只需要配置一次即可

将不同的功能写成不同的vue文件

一个vue文件不是一个单独的页面,是一个组件,需要先出差不同内容时,只需要将不同的组件切换导入即可

通过在一个html页面中切换不同的组件来达到页面的分模块编写

每一个组件都需要进行注册,并为其定义一个地址

Vue-cli搭建项目

vue-cli 官方提供的一个脚手架，用于快速生成一个 vue 的项目模板；

预先定义好的目录结构及基础代码，就好比咱们在创建 Maven 项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架，我们的开发更加的快速;

使用前提(环境)

Node.js

需要安装一个node.js(node.js是前端开发的一个环境)

可以为前端开发提供服务功能

npm

npm 是 Node.js 的包管理工具，用来安装各种 Node.js 的扩展。

npm 是JavaScript 的包管理工具，也是世界上最大的软件注册表。

有超过 60 万个JavaScript 代码包可供下载。

npm 让 JavaScript 开发人员可以轻松地使用其他开发人员共享的代码。

主要功能

统一的目录结构

本地调试

热部署

单元测试

集成打包上线

Node.js安装

首先去官网下载安装包

https://nodejs.org/en/download

下载完成后打开安装包

此时就安装完成了

测试是否安装完成

键盘上win+r打开输入命令,输入cmd打开命令行

在命令行中输入node -v和npm -v

若出现如下图所示的版本号则安装成功