前后端分离 之vue-cli 搭建项目mac 系统讲解

前端项目搭建必备技术

webpack

nodejs 搭建

vue-cli 的安装

以上技术自行了解安装

一：创建前端项目 采用vue-cli 脚手架

1：终端执行如下命令

vue init webpack my-vue 创建一个my-vue的项目

2:cd 到项目路径下  执行如下命令启动项目

npm install  安装必备的依赖

npm run dev 启动项目

二项目目录的介绍

1:项目目录

2：下面每个目录介绍下

build目录   存放webpack 打包构建项目 js 文件

config 目录 存放项目运行时的配置文件 如项目启动时的端口文件

test 开头的js 文件时 在创建项目时需要测试时才会生成

node_modules  文件 及 子目录

这个文件夹里面全部都是node的一些基础的依赖包，当我们拓展的安装一些别的插件时 也会装在这个文件夹里。

src  文件 及 子目录（重点）

这个文件夹 是 整个项目的主文件夹 ， 我们的代码大部分都在这里完成

assets 文件夹里面主要放置一些资源文件。比如js 、css 之类的文件。

实际开发中可能会单独建立一个文件夹 如api 存放各种请求的js文件

components 文件夹可以说是vue 的 灵魂了 ， 组件文件全部都可以放到这里面。

组件 ！一个vue项目就是由一个个的组件拼装起来的。

注意 有些大型项目 会把最通用的组件放到这里  然后每个页面做成单独的组件放在自定义的

页面组件文件夹中如views

router 文件夹 及 子目录(重点)

这个文件夹里的是整个vue项目的路由，vue 是单页面应用的代表，这里面就是设置一个一个组件的地址的文件。

一般只有一个index.js 文件

app 文件

这个文件是整个项目的入口文件，相当于包裹整个页面的最外层的div。

也可以理解为最大的组件

main.js 文件

这个文件是项目的主js,全局的使用的各种变量、js、插件 都在这里引入 、定义

static 文件夹 专门存放一些静态资源 如工具类 url等

初次意外 开发中 通用的插件一般也会定义在src 目录下

所以src 这个目录 非常重要

3:其他配置文件

index.html 项目的承载页面

package.json 文件是整个项目用的到的所有的插件的json的格式 比如 这个插件的 名称 ， 版本号。

当在项目里使用npm install 时 node 会自动安装， 这个文件里的所有插件。

剩下的不用管

最后总结下这个最基本的vue 项目结构