从零搭建 Vue 开发环境

PS: 本文首发于个人公众号： Java技术大杂烩 ，欢迎关注查看更多原创技术文章

前言
环境搭建
项目结构介绍
Vue 开发相关知识
axios 使用
Vue Router 路由使用
Vuex 状态管理
总结

前言

由于最近公司需要做H5页面，然后嵌入到微信公众号中去，从公众号菜单点击进入H5页面进行操作，需要使用 Vue 来做。之前由于部门中没有使用 Vue 做过任何下项目，所以我花了大概一周的时间来学习研究了 Vue 的语法，搭建开发环境，打包部署等，经历了从零开始学习 vue 到较为熟练开发的过程，所以在此记录下搭建过程。

环境搭建

1. 由于 Vue 使用到 Node.js 来进行编译打包等，所以第一步首先要安装 Node.js，到 Node.js 官网下载安装。
2. 打开 cmd 控制台，安装如下基本依赖。

a) npm i sass-loader node-sass
b) npm i webpack
c) npm i sass
d) npm i install -g eslint
e) npm i fibers
f) npm install -g @vue/cli

3. 使用 vue create projectName 命令来创建 Vue 项目
   
   这里有两个选择（上下箭头选择，回车即可）：

1. efault (babel, eslint)：创建时使用默认选项。
2. Manually select features：自定义创建，我们选择了自定义创建

选择了自定义创建后，如下所示：

之后，按空格进行选择，选择之后，回车即可创建 Vue 项目

 1. Bable 预编译处理组件
 2. TypeScript 用到的勾选
 3. Progressive Web App (PWA) Support 优化用
 4. Router 路由
 5. Vuex 状态管理
 6. CSS Pre-processors CSS 预处理器
 7. Linter/Formatter 代码格式化
 8. Unit Testing 单元测试
 9. E2E Testing E2E 测试

4. 上述选择了相关组件后，回车，当出现下面情况时，项目就创建完毕了：
   
5. 使用 HBuildx 来打开我们的项目即可进行开发编码。

项目结构介绍

通过上述操作之后，就创建了一个 Vue 项目，下面来简单介绍下它的项目结构，这个结构会根据我们的项目来介绍

1. node_modules: 引用的三方库
2. build: 编译相关的脚本
3. config: 相关配置脚本
4. dist: 编译之后的代码，这个代码就是最终上线运行的代码
5. src/asset: 放置静态资源，放在里面的资源会被webpack打包到代码里，和static文件夹有区别
6. src/axios: 放置 ajax 请求的工具类
7. src/components: 放置一些公共组件
8. src/router: 放置路由文件
9. src/store: 放置 Vuex 状态文件
10.src/views: 放置功能页面
11.App.vue: App.vue 是Vue页面资源的首加载项，是主组件和页面入口文件，所有页面都是在 App.vue 下进行切换的
12.main.js: 主要作用是初始化 Vue 实例并使用需要的插件
13.static: 放置静态资源，放置在该目录下的资源不会被webpack打包处理，它们会被直接复制到最终目录，必须使用绝对路径来访问这些文件
14.index.html: Vue 入口文件
15.package.json: 用来定义项目中需要依赖的包
16.package-lock.json: 记录依赖包的版本号

如何安装新的依赖

如果后续需要添加新的依赖，就需要在项目的根目录下执行 npm install pluginName --save 命令来进行安装，下面以 vuex 为例：

1.首先在项目的根目录下执行 npm install vuex --save 命令，出现下图中提示即可安装成功:

2.在 main.js 中注册 vuex：

3.注册之后，就可以在页面中使用了。

启动项目

经过上面一系列的步骤，现在项目已经可以运行起来了，在项目的根目录下面执行npm run serve 命令，当出现下面提示时即可运行成功：

之后在浏览器中输入 http://localhost:8080/出现如下界面就可以了：

备注：
现在新版本的运行命令变为了npm run serve，之前老版本的运行命令是 npm run dev，除此之外，npm 还提供了其他的命令，如下：
npm run dev ：老版本启动项目
npm run serve ：新版本启动项目
npm run build ：编译打包
npm run lint ：修改代码样式

现在项目已经启动起来了，但是如果要访问后台接口，还是不行的，我们需要配置 nginx：
1.首先需要到 Nginx 官网下载nginx，解压到本地
2.打开配置文件 nginx/conf/nginx.conf，配置如下内容：

1. 监听端口设置为 8081，随便设置，需要和 vue 项目中配置的一致
2. root 指向项目的根目录；root E:\test\mypro
3. 设置请求转到到后台所需要监听的端口，这里以 api 开头的请求都会被转发到后台的8888端口上

如下图所示：

之后，打开项目的 config/index.js 文件，配置 proxyTable 代理，注意这里的端口需要配置和 nginx 配的一样：

所以到这里，前端请求到后台的完整路径为:

1. 浏览器输入 localhost:8080 访问
2. localhost:8080 会被代理，代理到 127.0.0.1:8081 即本机的8081端口上
3. nginx 监听到有 8081 的请求后，会转发到后台的 8888 端口上
4. 此时，后台就会接受到前端发送的请求了

Vue 开发相关知识

组件

简单来说，一个 .vue 文件就是一个组件，组件它是可复用的实例。
vue组件有两种创建方式，一种是vue文件中通过 Vue.component()创建一个组件，一种是直接建一个.vue的文件。一般都是使用创建一个.vue文件的方式创建组件

一个组件分为三部分内容：