搭建环境
1. 开发工具
- VSCode
- VSCode插件 - vue（语法高亮）
2. 运行环境
- 安装Node.js
- 查看版本信息 node -v
3. 包管理工具
npm（国外源）
随node.js安装，查看版本信息npm -vcnpm（淘宝源）
npm install -g cnpm --registry=https://registry.npm.taobao.org
- 安装包
npm install -g @vue/cli
- 卸载包
npm uninstall vue-cli -g
4. 打包工具
- 安装webpack
npm install webpack -g
5. 安装vue-cli（脚手架）
- 安装
vue-cli 4.0+已改成@vue/cli，若安装旧版先卸载
npm install -g @vue/cli
- 卸载旧版vue-cli
npm uninstall vue-cli -g
- 查看版本信息
vue -V（注意是大写） - 使用
- 创建项目：
vue create projectName - 编译和热更新：
npm run serve - 编译并压缩：
npm run build
- 创建项目：
实践
创建项目
cmd 到要创建项目的文件夹
脚手架创建项目
1.1. 脚手架创建vue create my-project注：项目名称不能有大写
1.2. 选择配置（默认/手动），通过上下键选择，这里就选默认
1.3. 选择完成回车等待创建完成
1.4 创建完成会生成一个项目名称一样的文件夹通过ui创建
vue ui
会打开一个创建页面，可以在上面创建项目，启动调试，编译生成等，ui很简单，就不介绍。
调试运行
cmd到项目文件夹（不是上面创建的文件夹，而是通过脚手架/ui创建的项目名称文件夹）
npm run serve
每次运行都必须定位到对应文件夹，这个比较繁琐，下面介绍几个使用技巧
- 若VSCode开发，直接在终端执行
- 通过Powershell执行，打开对应文件夹，shift+鼠标右键，然后选择在此处打开Powershell
-
在文件夹路径前加cmd空格，直接定位到对应文件夹
注意cmd后面有空格
编译生成
npm run build
在项目文件生成dist文件夹
部署前端文件
- 跟后台服务器（IIS,tomcat）一起发布
把生成资源文件拷贝到后台服务器静态资源文件夹，后台服务器设置启动页
- 优点
- 简单，不需要部署多台服务器
- 缺点
- 前端人员需要和后端人员配合
- 发布后有调试问题还是需要基于后端服务器
- 前端独立部署
- nginx做前端资源的web 服务器，
- 反向代理后端服务器的请求
- 优点
- 前后端单独部署，方便各自排查文档
- 前后端人员减少沟通成本
- 可以在nginx解决跨域问题，不需要后台服务器处理
- 缺点
- 增加复杂性，但这个在nginx里算不上什么
nginx 配置文件
server {
listen 80;
server_name localhost;
location / {
root F:\Codes\Vue\my-project\dist;
index index.html index.htm;
}
location /api {
proxy_pass http://127.0.0.1:8080;
}
}
