从零搭建 Vue 开发环境

1. 前言
2. 环境搭建
3. 项目结构介绍
4. Vue 开发相关知识
5. axios 使用
6. Vue Router 路由使用
7. Vuex 状态管理
8. 总结

前言

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

环境搭建

1. 由于 Vue 使用到 Node.js 来进行编译打包等，所以第一步首先要安装 Node.js，到Nodejs官网,http://nodejs.cn/下载安装。
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

1. 使用 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 命令，出现下图中提示即可安装成功。

1. 在 main.js 中注册 vuex：

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

启动项目

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

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

备注： 现在新版本的运行命令变为了 npm run serve，之前老版本的运行命令是 npm run dev，除此之外，npm 还提供了其他的命令，如下：

1. npm run dev ：老版本启动项目
2. npm run serve ：新版本启动项目
3. npm run build ：编译打包
4. npm run lint ：修改代码样式

现在项目已经启动起来了，但是如果要访问后台接口，还是不行的，我们需要配置 nginx：

1. 首先需要到nginx官网,http://nginx.org/en/download.html 下载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文件的方式创建组件

一个组件分为三部分内容：<template>、<script>、<style>。<template>: 用于编写页面显示模板，必须要有； <script>: 用户编写数据交互、函数、组件导入和注册等信息； <style>: 引入样式或者直接定义CSS样式。 <script> 和 <style> 两部分不是必须的，可以不需要。

组件的调用

当创建了一个组件，需要使用该组件的时候，在<script>签中使用 import 进行导入，import中@后的路径为src下的一级目录，也可以使用相对路径。然后在 components 中进行注册，最后在 <template> 中使用，

组件之间传值

1. 父组件向子组件传值 父组件向子组件传值，通过 props 进行传值： 父组件：

子组件：

这样就可以把cityList传递到子组件中了。

1. 子组件向父组件传值，通过事件了传递，需要在父组件中定义被子组件调用的方法并在调用子组件时关联上。
2. 兄弟组件传值，即互不相关的组件之间传值需要用到 Vuex ，这个下面会说。

axios 使用

Axios 是一个基于 promise 的HTTP库，主要用来发送 Ajax 请求. 首先执行 npm install axios --save 命令安装 axios，由于axios 实例的默认值不满足我们要求，所以我们还需要在 src 下创建 axios 文件夹，在 axios 文件夹下创建 index.js 文件，在里面创建 axios 实例，在里面我们可以自定义拦截器在请求或响应被 then 或 catch 处理前拦截它们，拦截器中可以进行鉴权处理,错误响应处理等。

创建了 axios 实例之后，需要绑定到 Vue 原型上，在 mai.js 中进行绑定：

之后，就可以在页面中使用 axios 来发送请求到后台了 ，

        this.$axios({
          method:'post',
          url:'/api/get',
          data:this.$qs.stringify({
            'param': 'myk'
          })
        }).then(response => {
          console.info(response);
        }).catch(error => {
          console.info(error);
        })

此外，还可以执行 get, delete, put等请求。

我们在创建请求的时候，可以进行一些配置的，比如发送数据到后台之前对参数进行处理，对返回的数据进行处理，超时时间等，具体如下：

{
  url: '/user', // `url` 是用于请求的服务器 URL
  method: 'get', // `method` 是创建请求时使用的方法,默认为get
  baseURL: '/api/', // 这里的baseURL会自动加在请求的url前面
  ansformRequest: [function (data, headers) {
    // `transformRequest` 允许在向服务器发送前，修改请求数据
    // 对 data 进行任意转换处理
    return data;
  }],
  transformResponse: [function (data) {
    // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
    // 对 data 进行任意转换处理
    return data;
  }],
  responseType: 'json',  // 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream', 默认为json
  responseEncoding: 'utf8', // 字符编码，默认为utf8
}

更多的配置可以参考 axios中文网,http://www.axios-js.com/zh-cn/docs/

Vue Router 路由使用

Vue Router 是 Vue 官方的路由管理器，在实际开发中经常使用的功能为动态路由匹配。在传统的页面应用中，是通过一些超链接来实现页面之间的跳转的，在 vue-router 单页应用中，则是通过路由之间的切换即组件之间的切换来实现的。

首先需要执行 npm install vue-router 安装 然后在 main.js 中进行注册

然后在 src 下创建 router 文件夹，在文件夹里创建 index.js，在里面编写路由信息：

使用：

注： router 怎么传递参数，多个参数怎么传，传递参数之后，在页面怎么获取参数等，关于更多的路由 router，由于本篇幅太长，所以后面会有专门的文章来学习介绍

Vuex 状态管理

vuex 是一个专门为 vue.js 应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 首先执行 npm install vuex --save 安装 在 src 下创建 store 文件夹，在文件夹下创建 index.js 文件，在里面维护组件状态：

在 main.js 中注册：

如何使用

在页面中获取状态的值：

在页面中设置状态的值：

注： 由于本篇幅太长，所以后面会有专门的文章来学习介绍更多关于 Vuex 的知识

总结

到这里 Vue 的开发环境就搭建完了，花了一周的时间学习 Vue 语法，环境的搭建，到现在基本能熟练开发了；又学会了一门语言，哈哈哈哈。