当前位置: 首页 > news >正文

前端vue项目启动

 

(1)装好nodejs,最新版本6.10以上的好像都能自动配置路径和npm啥的,反正装好后在任意路径下用cmd查"node --version"或者"npm -v"都能给出版本号,不用像一些其他教程一样还要配置环境变量。

(2)切换npm镜像:在任意路径下用cmd输入“npm install -g cnpm --registry=https://registry.npm.taobao.org” 这样就能用淘宝的npm镜像代替国外的资源。

(4)npm全局安装vue:仍旧在任意路径的cmd下输入“cnpm install vue-cli -g”,安装vue。成功后输入vue能出来信息。

(5)npm项目依赖组件安装:cmd进入前端vue项目的根目录,输入命令“cnpm install”,会根据前端项目的依赖关系下载好相关的组件,存在项目目录的node_modules文件夹下。

(6)npm编译:第一次运行前,要对项目进行编译,cmd进入前端vue项目的根目录,输入命令“npm run build”,此时会对根目录下的package.json对build命令的定义进行编译,一般"build" = "webpack -p"。

(7)配置nginx:前后端分离项目一般都要解决跨域问题,上nginx吧,配好nginx安装目录/conf/nginx.conf的server模块。

(8)配置项目主机地址:前端项目里需要有个config文件夹,里面要有host.js或者config.js文件,定义nginx转域后的主机地址+端口号(也就是nginx.conf里面server模块的server_name值+listen的端口号)。git项目拉下来没有的话自己加一个,文件内容范例(下面用${}表示nginx.conf里面server模块对应的字段值):

const host = 'http://${server_name}:${listen}/server/';
export {host};

(9)配置windows的HOSTS:由于是在本机上启用前端项目,需要将127.0.0.1和nginx代理后的域名做对应。找到系统的HOSTS文件(win7系统下在C:\Windows\System32\drivers\etc里面),增加一条“127.0.0.1 ${server_name}”。否则本地启动前端项目后浏览器访问nginx代理后的域名会发生dns错误。

(10)启动nginx

(11)启动项目:cmd进入前端vue项目的根目录,输入命令“npm run dev”,此时会用nodejs启动这个前端的vue项目。大功告成。


http://www.taodudu.cc/news/show-6310198.html

相关文章:

  • 【physx/wasm】在physx中添加自定义接口并重新编译wasm
  • excel---常用操作
  • Lora训练Windows[笔记]
  • linux基础指令讲解(ls、pwd、cd、touch、mkdir)
  • InnoDB 事务处理机制
  • 启明云端ESP32 C3 模组WT32C3通过 MQTT 连接 AWS
  • VUE启动流程
  • IDEA启动VUE项目的方法
  • idea中启动vue项目
  • vue初始安装及项目初启动
  • Python 文件的读写模式
  • python的文件读写方法有哪些_python读写文件的方法有哪些
  • Python之文件的读写
  • python文件读写操作
  • 什么是网络安全?网络安全包括哪几个方面?
  • 【微信小程序】黑马优购--05商品详情
  • 微信小程序在线考试项目开发-接口封装调用
  • 微信小程序开发 从创建到使用
  • 微信小程序框架(四)-全面详解(学习总结---从入门到深化)
  • uniapp使用高德地图定位(兼容app)
  • 高德地图Amap搜索定位
  • amap 实现获取定位功能(高德api)
  • 我的高德地图之定位,Marker,位置信息。
  • Android高德地图的定位
  • 利用高德地图实现定位功能
  • VxWorks中文FAQ
  • VxWorks中文FAQ(转载)
  • Angular4+ng2-ckeditor踩坑
  • Angular 组件类测试
  • A/B-Test简介
  • ANTLR4 入门学习(一):下载和测试
  • AB test | 学习笔记
  • ANTLR4入门【打造你自己的语法规则】
  • 02 ABY框架的搭建及踩到的坑
  • ABY环境配置
  • ABBYY FineReader 14之如何选择正确的OCR选项