vue.js开发环境搭建

前言

vue.js是现代前端开发中一个重要的流行框架，与Angular.js和React.js类似，提供了对html,js以及css的编译能力，同时提供了一个运行时的框架，用于组合组件化的调用方式，这与传统的在页面增加css和js，实现页面效果有很大的区别。
vue其实采用编译+底层框架的方式提供了对web开发的一个便利的措施，vue包含几个部分，第一，利用webpack为基础，开发了vue-loader，这个很牛x，是个编译器，把你写的vue的文件，编译成浏览器能识别的js和css。第二，从框架层面，提供了双向数据绑定，页面路由，事件分发等能力，等于对浏览器的基础js和dom的能力进行了封装。
传统的前端开发方式是，编写页面，编写样式，编写脚本，在页面中引入样式和脚本，即可运行。现代的前端开发方式为：开发组件，开发路由连接组件，编译应用，发布调试。所以，与传统页面开发不同，首先要搭建一个编译环境，这个编译环境主要基于webpack来实现，包含了babel,less,scss,lint等工具。而这些工具都是基于Node.js的环境来运行的。
因此，vue.js开发环境的搭建主要包含以下几个步骤：

• Node.js环境的搭建，包括npm的配置
• 基于npm安装vue工程的脚手架，官方脚手架最新为vue-cli3，整合并封装了webpack内容
• 在工程中设置反向代理环境以及一些其他可选的配置

Node.js环境搭建

1. 下载
   在nodejs官网下载最新的LTS版本的安装包，LTS代表长期维护版本，通常比较安全稳定。如下图所示：
   
   nodejs下载.png
   
   nodejs官网地址为https://nodejs.org/en/，建议在64位操作系统上安装x64版本，因为对于很多nodejs的包来讲，基本都支持64位操作系统，未来部署环境也基本都是x64操作系统
2. 安装
   安装过程参考：

• https://www.cnblogs.com/zhouyu2017/p/6485265.html
• https://www.cnblogs.com/liangsongbai/p/5506073.html
  说明：
• node.exe是node.js的运行环境，类似java的java.exe
• npm用于管理nodejs组件包的下载和依赖关系包的下载，类似于java的maven或者是python的pip工具
• 由于国内外网络原因，尽量在安装完成后设置npm的国内镜像代理，加快下载速度，国内最常用的就是淘宝镜像
• 单独设置global和cache的文件夹的目的是为了修改默认存放位置，现在很多工具都把下载内容放在C盘的User目录下，如果你的nodejs安装路径不在C盘，你的C盘也不想那么大的话，尽可能设置一下。

• 安装完成并且成功的标志就是在cmd或者powershell下，直接输入node -v以及npm -v能够打印出版本，证明环境变量和安装都正确，如下图所示：

  
  
  node命令截图.png

vue-cli安装及新建工程

vue-cli是从头搭建vue工程的脚手架（也就是工具），通过该工具，可以简化很多工程搭建的配置环境，vue-cli的官网地址为：https://cli.vuejs.org/zh/

1. 安装
   用npm命令安装，在命令行下直接输入npm安装

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装完成后，在命令行输入（注意大小写）：

vue -V

会输出安装的版本号：

 C:\Users\xiongzhenqing> vue -V
3.3.0

安装成功

2. 新建工程
   1）在命令行输入：

vue create hello-world

其中，hello-world是工程名，也是文件夹名字，命令行当前目录下新建一个叫做hello-world的文件夹
2）选择搭建方式，通过键盘上下左右键选择预设的工具集，由于第一次搭建没有预设，选择手动选项，即下图中最下面的选项，然后回车

图片.png

3） 手动选择工程特性（上下键移动光标，空格键选中或反选）

图片.png

如上图所示，工程特性分别解释一下：

• Babel 必选，因为该组件是编译器，用于将编写的ES6代码编译成浏览器能识别的JavaScript代码，是核心组件包
• Typescript 微软开发的一种编程语言，通过Babel能够变异成JavaScript，可选，一般来讲，初级开发不建议用，增加学习成本
• PWA Web App，浏览器支持的小程序，一般不用
• Router 路由组件，用于单页面程序组件之间的页面跳转路由，必选
• Vuex 存储框架，建议选用
• CSS Pre-processors CSS预处理工具，支持SASS，LESS等预编译语言，用于增强编码时css的能力，最终这些内容会被预处理工具变异成css，必选
• Linter / Formatter 代码规范检查工具，可选
• Unit Testing 单元测试框架 可选
• E2E Testing 端对端测试框架，用于支持自动化测试，可选
  所有选择完成后，回车
  4） 选择css预处理器
  
  图片.png
  
  一般来讲，由于element-ui和bootstrap等框架都选择了sass，所以建议新工程还是可以考虑采用SASS，这里的dart-sass和node-sass通常选择dart-sass，因为运行速度还可以，新特性较多，安装简便
  当然，如果对于LESS比较熟悉，也可以选择Less
  选择完后回车
  5） ESLint配置
  
  图片.png
  
  如果选择了ESLint，会出现该步骤，通常选择第一个选项，语法出错提示，这样对代码规范性要求较低，否则一堆报错，看着就头疼
  
  代码检查时机
  
  选择在保存时进行代码检查
  6） 配置文件位置设置
  
  配置文件位置设置
  
  Babel，ESLint等是独立配置文件存在还是放在package.json文件里面，通常选择独立文件存在，这样好配置，否则，package.json文件很大，难以查找
  7） 配置过程存储
  
  配置过程存储
  
  前面一步一步选择了很多选项来建立工程，这个过程很复杂，但是整个过程可以存为一个配置，今后建立工程直接选择该配置，一步到位，不用再经历这么复杂的选择过程了，选择y，回车，然后输入一个名字，就是你的预设名字

---

接下来，就等待各种下载，配置，生成……
结果如下图：

图片.png

各个文件和文件夹说明如下：
node_modules：是所有本地依赖包的存放所在，今后所有npm install --save-dev所安装的包，都在该目录下
public：该目录存储了所有发布所需的静态文件，如html文件模板，公共css文件，小图片等等
src：源码所在路径，这里才是真正的源码所在
其他的文件都是各种配置，不详述了，看文件名应该猜的出来，比如babel.config.js是babel的配置内容，这里比较重要的文件就是package.json，里面记录了工程依赖的外部关系，启动命令等

---

验证

• cmd命令进入当前目录
• 输入命令：

npm run serve

图片.png

vue开发中的常用配置及调试

• 开发环境反向代理设置
  在vue开发中，前端界面和后台服务分离，为了便于调试，通常在本地环境中设置反向代理，连接到后台接口服务，具体配置方式如下：
  在工程根目录下新建vue.config.js文件，录入如下内容：

module.exports = {
  devServer: {
    port: 8090,
    proxy: {
      "/api": {
        secure: false,
        target: 'http://192.168.1.144:8010',//设置你调用的接口域名和端口号 别忘了加http
        changeOrigin: true,
        pathRewrite: {
          "^/api": "/" //这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
        },
          cookiePathRewrite:{
              '/':'/',
              '/nfcm':'/api'
          }
      }
    }
  }
};

通过该方式，可以在调试的时候，反向代理到任何一个后台，包括模拟后台，便于前后端的联调