原创: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:\Windows\System32\drivers\etc里面),增加一条“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项目启动步骤的更多相关文章

  1. windows下vue.js开发环境搭建教程

    这篇文章主要为大家详细介绍了windows下vue.js开发环境搭建教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中 ...

  2. 从github下载的vue项目启动宝Cannot Get错误

    从github下载的vue项目启动宝Cannot Get错误,网上参考出现该错误来源很多,这里先总结遇到的第一个解决方法. 参考地址: https://www.cnblogs.com/anns/p/7 ...

  3. vue项目启动报错 spawn cmd ENOENT errno: -4058

    vue项目启动报错 spawn cmd ENOENT errno: -4058 运行vue项目(npm run dev)报错 提示 'npm' 不是内部或外部命令 cmd输入node -v 有版本号 ...

  4. windows下nginx的启动关闭

    Windows下Nginx的启动.停止等命令 在Windows下使用Nginx,我们需要掌握一些基本的操作命令,比如:启动.停止Nginx服务,重新载入Nginx等,下面我就进行一些简单的介绍. .启 ...

  5. Windows下Nginx的启动、停止等命令

    Windows下Nginx的启动.停止等命令 在Windows下使用Nginx,我们需要掌握一些基本的操作命令,比如:启动.停止Nginx服务,重新载入Nginx等,下面我就进行一些简单的介绍.1.启 ...

  6. Windows下Nginx的启动、停止等命令(转)

    Windows下Nginx的启动.停止等命令 在Windows下使用Nginx,我们需要掌握一些基本的操作命令,比如:启动.停止Nginx服务,重新载入Nginx等,下面我就进行一些简单的介绍.1.启 ...

  7. memcached 在windows下安装及启动

    memcached 在windows下安装及启动   Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数, ...

  8. Windows 下安装 swoole 具体步骤

    Windows 下安装 swoole 具体步骤: Swoole,原本不支持在Windows下安装的,所以我们要安装Cygwin来使用.在安装Cygwin下遇到了很多坑,百度经验上的文档不是很全,所以我 ...

  9. Windows 下安装 swoole 具体步骤(php)

    Windows 下安装 swoole 具体步骤: Swoole,原本不支持在Windows下安装的,所以我们要安装Cygwin来使用.在安装Cygwin下遇到了很多坑,百度经验上的文档不是很全,所以我 ...

随机推荐

  1. lintcode 二叉树后序遍历

    /** * Definition of TreeNode: * class TreeNode { * public: * int val; * TreeNode *left, *right; * Tr ...

  2. jdbc连接sql server2017进行简单的增、删、改、查操作

    这几天刚做完数据库的课程设计,来稍微总结一下如何通过jdbc访问sql server数据库进行简单的增删改查操作.在连接之前,需要简单地配置一下,包括下载对应jdk版本的驱动,设置环境变量等等.相关配 ...

  3. Redis 数据结构服务器

    Redis 简介 Redis 是完全开源免费的,遵守BSD协议,是一个高性能的key-value数据库. Redis 与其他 key - value 缓存产品有以下三个特点: Redis支持数据的持久 ...

  4. [Clr via C#读书笔记]Cp6类型和成员基础

    Cp6类型和成员基础 成员 常量:字段(静态字段和实例字段):实例构造器:类型构造器(用于静态字段的构造):方法(静态方法和实例方法):操作符重载(本质是一个方法):转换操作符:属性(本质还是方法): ...

  5. Wordcount -- MapReduce example -- Reducer

    Reducer receives (key, values) pairs and aggregate values to a desired format, then write produced ( ...

  6. PHP正则相关

    描述字符串排列模式的一种自定义语法规则 如果可以使用字符串函数处理的任务 就不要使用正则 正则表达式 就是通过构建具有特定规则的模式,与输入的字符信息比较 在进行 分割 匹配 查找 替换 等工作   ...

  7. *.hbm.xml作用是什么

    实体与表的映射关系通过XML来描述的文件.在 hibernate.cfg.xml中管理,在项目启动的时候加载到内存. hbm指的是hibernate的映射文件 映射文件也称映射文档,用于向Hibern ...

  8. POJ 3028 Shoot-out(概率DP)

    Description This is back in the Wild West where everybody is fighting everybody. In particular, ther ...

  9. PHPCMS调取当前栏目的描述、文章位置导航、当前栏目链接、当前栏目名称

    当我们填写了栏目描述,怎么调用出来. 使用 {$CATEGORYS[$catid][description]} 就可以把栏目的描述调用出来 下面三个也比较常用{catpos($catid)} 显示文章 ...

  10. 20172333 2017-2018-2 《Java程序设计》第10周学习总结

    20172333 2017-2018-2 <Java程序设计>第10周学习总结 教材学习内容 第十三章 集合是一个对象,一个保存其他对象的数据库. 集合可以保存不同种类的对象也可以保存同种 ...