windows下vue项目启动步骤

摘要:
辗转反侧之后,我终于开始了构建的vue项目。我记下了备份步骤。它只适用于那些没有启动前端项目经验的人,可能对其他人没有参考价值:OS:windows7gitclone已经为构建的vue项目安装了Nodejs。6.10以上的最新版本似乎能够自动配置路径和npm。无论如何,安装后,我可以使用cmd在任何路径下查询“node version”或“npm-v”以提供版本号。您不需要像其他教程那样配置环境变量。启动nginx启动项目:cmd进入前端vue项目的根目录,输入命令“npmrundev”,然后使用nodejs启动前端vue工程。

原创:https://blog.csdn.net/qq_27680317/article/details/71123051?locationNum=10&fps=1

 不是ngnix服务器是,忽略7~10;

前后端分离项目,要做前后端联动测试,没整过前端用vue, nodejs和webpack的开发管理方式。来回折腾终于把已经建好的vue项目启动起来,做个笔记记录下步骤备用,只针对没有任何前端项目启动经验的,可能对别人没有参考意义:

os:windows7

(1)git clone已建的vue项目(强迫症患者非要写,废话)

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

(3)切换npm镜像:在任意路径下用cmd输入“npm install -g cnpm --registry=https://registry.npm.taobao.org” 这样就能用淘宝的npm镜像代替国外的资源,懒得用代理同学的福音。以后就可以用cnpm命令来全部代替npm。不设置代理的话,在后续项目的npm install的时候,容易因为超时而失败。有教程把这条命令的“--registry”写成只有一个“-”,注意是两个“--”。

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

(5)npm项目依赖组件安装:cmd进入前端vue项目的根目录,输入命令“cnpm install”,会根据前端项目的依赖关系下载好相关的组件,存在项目目录的node_modules文件夹下。一般git库会gitignore依赖组件,也就是没有node_modules文件夹,不然太大了... 这步容易发生err,遇见了就要打回去重弄,不要掩耳盗铃,具体错误排查stackoverflow...。

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

(7)配置nginx:前后端分离项目一般都要解决跨域问题,上nginx吧,配好nginx安装目录/conf/nginx.conf的server模块。nginx的配置不详述。好像现在nodejs也能直接代理,但是如果用windows的同学,好像windows的nodejs不支持process.argv[...],nginx欢迎你回归(话说nginx在windows下表现也不太稳定,经常好好地项目又不行了,此时不管三七二十一首先重启nginx!)

(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:WindowsSystem32driversetc里面),增加一条“127.0.0.1 ${server_name}”。否则本地启动前端项目后浏览器访问nginx代理后的域名会发生dns错误。
(10)启动nginx
(11)启动项目:cmd进入前端vue项目的根目录,输入命令“npm run dev”,此时会用nodejs启动这个前端的vue项目。大功告成。
 
一个比较典型的用webpack管理的vue项目应该有如下文件和文件夹:
config/:定义代理的域名
dist/: 整个前端项目用webpack打包后的目标存放文件夹,里面一般有bundle.js文件
lib/: 开发时引用的一些依赖文件,最经典的就是jquery
node_modules/:上面介绍的用npm对项目依赖组件进行安装时就放在这个文件夹里。
src/:自己写的源代码
index.html:主页入口文件
package.json和webpack.config.js:这两个文件应该是组件依赖关系和管理打包的配置文件?不太懂,反正没有是不能cnpm install、cnpm run build、cnpm run dev的。
 
第一次配置好后,以后启动只用两步:
(1)启动nginx
(2)进入前端项目根目录,cmd运行npm run dev

免责声明:文章转载自《windows下vue项目启动步骤》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇js 设计模式TensorRT在ubuntu18.04的安装下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

前端面试经典题目(HTML+CSS)二

1、浏览器页面由哪三层构成,分别是什么,作用是什么? 构成:结构层、表示层、行为层 分别是:HTML、CSS、JavaScript 作用:HTML实现页面结构,CSS完成页面的表现与风格,JavaScript实现一些客户端的功能与业务。 2、行内元素有哪些?块级元素有哪些? 空(void)元素有那些? 行内元素:a、b、span、img、input、str...

Vue 标签中的ref属性和refs

ref: ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件。 我理解的ref也就是相当于是id,一个元素,但是比 js 少了一些获取id的写法,更加的方便,简介。 refs: refs 直接在实例里面获取 ref...

uswgi

1、安装uwsgi注意: 1)在系统环境安装,非虚拟环境 2)使用对应python版本安装 3)要先安装python开发包 ###sudo apt-get install python3.6-dev pip3 install uwsgi 2、测试 uwsgi 是否正常:新建 test.py 文件,内容如下:def application(env, star...

Nginx的启动、停止与重启

启动启动代码格式:nginx安装目录地址 -c nginx配置文件地址 例如: [root@LinuxServer sbin]# /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf 停止nginx的停止有三种方式: 从容停止   1、查看进程号 [root@LinuxServe...

vuejs 组件 移动端push 没有渲染页面

this.idcards.push(arr) 这个无效 就知道了 vuejs有个跟push相同的方法 console.log(this.list.push.toString()) 这个push是个同名方法并非 native 的 array push只有用它这个“假”方法才能运行监听函数更新视图 你直接用 Array.prototype.push.app...

Nginx实现多域名证书HTTPS

目前公司有2个域名,其中这次涉及到3个子域名需要更改为HTTPS传输,分别为: passport.abc.com www.test.com admin.test.com 那么就涉及到购买ssl证书的问题,由于价格问题使用3个不同的证书(每个域名一个)。 由于实验环境,我们就手动生成3个ssl证书 建立目录,及进入目录 [root@gz122haproxy9...