前言
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环境搭建
- 下载
在nodejs官网下载最新的LTS版本的安装包，LTS代表长期维护版本，通常比较安全稳定。如下图所示：
nodejs下载.png
nodejs官网地址为https://nodejs.org/en/，建议在64位操作系统上安装x64版本，因为对于很多nodejs的包来讲，基本都支持64位操作系统，未来部署环境也基本都是x64操作系统 - 安装
安装过程参考：
- 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/
- 安装
用npm命令安装，在命令行下直接输入npm安装
npm install -g @vue/cli
# OR
yarn global add @vue/cli
安装完成后，在命令行输入（注意大小写）：
vue -V
会输出安装的版本号：
C:\Users\xiongzhenqing> vue -V
3.3.0
安装成功
- 新建工程
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'
}
}
}
}
};
通过该方式，可以在调试的时候，反向代理到任何一个后台，包括模拟后台，便于前后端的联调
网友评论