【Vue】搭建开发环境
2020-04-17 07:33:30来源:博客园 阅读 ()
【Vue】搭建开发环境
学习一个新东西的时候,先要把开发环境搭起来,最近想学学前端技术,vue的开发环境搭建还是比较简单,这里简单记录一下
学习一个新东西的时候,先要把开发环境搭起来,最近想学学前端技术,vue的开发环境搭建还是比较简单,这里简单记录一下
搭建环境
1. 开发工具
- VSCode
- VSCode插件 - vue(语法高亮)
2. 运行环境
- 安装Node.js
- 查看版本信息 node -v
3. 包管理工具
-
npm(国外源)
随node.js安装,查看版本信息npm -v -
cnpm(淘宝源)
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.1. 脚手架创建 vue create my-project
注:项目名称不能有大写
1.2. 选择配置(默认/手动),通过上下键选择,这里就选默认
1.3. 选择完成回车等待创建完成
1.4 创建完成会生成一个项目名称一样的文件夹
2. 通过ui创建
vue ui
会打开一个创建页面,可以在上面创建项目,启动调试,编译生成等,ui很简单,就不介绍。
调试运行
cmd到项目文件夹(不是上面创建的文件夹,而是通过脚手架/ui创建的项目名称文件夹),执行
npm run serve
每次运行都必须定位到对应文件夹,这个比较繁琐,下面介绍几个使用技巧
若VSCode开发,直接在终端执行
2. 通过Powershell执行,打开对应文件夹,shift+鼠标右键,然后选择在此处打开Powershell
3. 在文件夹路径前加cmd 空格 ,直接定位到对应的文件夹
编译生成
cmd执行
npm run build
在项目文件生成dist文件夹
部署前端文件
1. 跟后台服务器(IIS,tomcat)一起发布
把生成资源文件拷贝到后台服务器静态资源文件夹,后台服务器设置启动页
- 优点
- 简单,不需要部署多台服务器
- 缺点
- 前端人员需要和后端人员配合
- 发布后有调试问题还是需要基于后端服务器
2. 前端独立部署
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; } }
转发请标明出处:https://www.cnblogs.com/WilsonPan/p/12719082.html
原文链接:https://www.cnblogs.com/WilsonPan/p/12719082.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:12.居中总结
下一篇:13.制作一个直角三角形
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-14
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-13
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-02
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash