vue+node+webpack环境搭建教程


Posted in Javascript onNovember 05, 2017

一、环境搭建

1.1、去官网安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html )

注意node的版本,只有支持和谐模式的node才会支持es6,在基于webpack构建项目名称时才不会报错。推荐最新版本.

下载安装包之后直接点击安装即可。测试安装成功的界面如下:

vue+node+webpack环境搭建教程

1.2、利用npm安装webpack命令行语句为npm install webpack -g。测试安装成功的界面如下:

vue+node+webpack环境搭建教程

1.3、下面就是安装淘宝镜像,如下图:

vue+node+webpack环境搭建教程

1.4、接下来就是全局安装vue-cli。需要注意的是使用npm安装vue-cli的时候时间很久,可能会超过两个小时

安装语句为:npminstall--globalvue-cli

1.5、创建一个基于webpack模板的新项目

命令行语句为vue init webpack my-project(其中my-project为文件名称,并且文件名只能是小写字母)。在创建模板新项目的时候需要进入到指定的文件夹下面去。

在cmd里输入vue init webpack my-project (项目文件夹名),回车后,等待一小会儿,依次出现‘git'下的项,可按下图操作

vue+node+webpack环境搭建教程

命令执行完成后可以看到在my-project的文件夹下面多了如下的内容:

vue+node+webpack环境搭建教程

在创建新项目时,如果报以下错误,则说明node版本过低,不支持和谐模式(大概就是说支持es6,f否则不支持,具体还需大神指教),应换成高版本的node。错误如下图所示:

vue+node+webpack环境搭建教程

5.安装依赖

在cmd里 1).输入:cd my-project(项目名),回车,进入到具体项目文件夹

2).输入:cnpm install,回车,等待一小会儿

该命令执行后可能会出现以下错误,解决方案如下图:

vue+node+webpack环境搭建教程

回到项目文件夹,会发现项目结构里,多了一个node_modules文件夹(该文件里的内容就是之前安装的依赖)

基于脚手架创建的默认项目结构如下图所示:

vue+node+webpack环境搭建教程

6.webstorm安装,项目的引入

去官网下载webstrom安装包进行安装。

一直next,根据自己电脑系统,选择安装64位的系统还是32位的,选中js,css,html àjetbrainsà然后就是install安装

在webstorm中file下选择open (选择你的项目文件夹)

看着很简单,我怕过几天我操作出错。

7.测试环境是否搭建成功

方法1:在cmd里输入:cnpm rundev

(显然每次修改代码,每次去cmd输入命令是个很繁琐的过程,所以在webstorm中调出npm菜单。

在package.json文件上点击右键—〉点击show npm scripts 即可调出菜单,以后运行只需在npm菜单里双击dev.

注意在命令行运行项目和dev运行项目不可一起进行,进行一个时需将另一个关闭,否则会报端口已被占用的错误。

方法2:在浏览里输入:localhost:8080(默认端口为8080)

如果输入运行命令后,报错。则有两种情况,如下图所示:

第一种情况:端口占用问题

vue+node+webpack环境搭建教程

解决方案为:

方案1:在进程中关闭该端口。

a.打开cmd,输入命令netstat ?ano 会出现所有的端口号,

b.local address下面是端口号,PID是占用端口号的某程序的进程号(记住进程号)

c.打开任务管理器(ctrl + alt +delete) ,点击进程, 然后点击查看,选择“选择列”,点击确定后就会找出占用了端口进程程序

d.找出记住的进程号,关闭

方案2:在config/index.js文件中,修改端口号。Port:新端口号。

第二种:npm版本过低,需要升级:

vue+node+webpack环境搭建教程

解决方案:

a.输入命令:npm install -g npm

b.复制C:\Users\{你的Windows用户名}\AppData\Roaming\npm\node_modules\npm下的文件到你的 NodeJS安装目录下的 \node_modules\npm 中,覆盖掉原有的全部文件

(或者用比较苯的方法,重新走一遍之前的步骤)

运行起来后的效果如下图所示:

vue+node+webpack环境搭建教程

二、应个人需求会存在的改变

1、vue.js更改默认端口号8080为指定端口:

执行npm run dev实际是在调用根目录下的package.json

打开package.json后可发现有这样一段代码

"scripts":{
"dev":"nodebuild/dev-server.js",
"build":"nodebuild/build.js",
"lint":"eslint--ext.js,.vuesrc"

}

由此可知,我们应该查看build目录下的dev-server.js文件

在dev-server.js文件中可找到

varuri='http://localhost:'+port

此处的port便是我们将要寻找的,在dev-server.js的开始部分我们可以发现

varpath=require('path')

而path又是从哪里来的呢?

根目录下有一个config文件夹,看名字就知道与配置有关,打开config目录下的index.js

dev:{
env:require('./dev.env'),
port:8080,
autoOpenBrowser:true,
assetsSubDirectory:'static',
assetsPublicPath:'/',
proxyTable:{},
cssSourceMap:false

}

这里不仅可以改变端口,还可以根据需要改变其他配置信息。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
5 cool javascript apps
Mar 24 Javascript
使用JQuery进行跨域请求
Jan 25 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
Jun 28 Javascript
jquery中的查找parents与closest方法之间的区别
Dec 02 Javascript
javascript setinterval 的正确语法如何书写
Jun 17 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
Nov 25 Javascript
jquery中object对象循环遍历的方法
Dec 18 Javascript
javascript实现页面滚屏效果
Jan 17 Javascript
详解基于angular路由的requireJs按需加载js
Jan 20 Javascript
Angular2平滑升级到Angular4的步骤详解
Mar 29 Javascript
node.js的http.createServer过程深入解析
Jun 06 Javascript
vue动态渲染svg、添加点击事件的实现
Mar 13 Javascript
JavaScript实现三级级联特效
Nov 05 #Javascript
angular中不同的组件间传值与通信的方法
Nov 04 #Javascript
详解使用React全家桶搭建一个后台管理系统
Nov 04 #Javascript
JavaScript中立即执行函数实例详解
Nov 04 #Javascript
Vue全家桶实践项目总结(推荐)
Nov 04 #Javascript
浅谈Vuex的状态管理(全家桶)
Nov 04 #Javascript
简述Angular 5 快速入门
Nov 04 #Javascript
You might like
合作指挥官:孟斯克
2020/03/16 星际争霸
PHP5 字符串处理函数大全
2010/03/23 PHP
PHP获取当前url的具体方法全面解析
2013/11/26 PHP
如何写php守护进程(Daemon)
2015/12/30 PHP
jQuery+php简单实现全选删除的方法
2016/11/28 PHP
详解thinkphp实现excel数据的导入导出(附完整案例)
2016/12/29 PHP
ext实现完整的登录代码
2008/08/08 Javascript
jQuery 打造动态渐变按钮 详细图文教程
2010/04/25 Javascript
url地址自动加#号问题说明
2010/08/21 Javascript
TinyMCE 新增本地图片上传功能
2010/11/05 Javascript
利用webqq协议使用python登录qq发消息源码参考
2013/04/08 Javascript
jQuery aminate方法定位到页面具体位置
2013/12/26 Javascript
Bootstrap零基础入门教程(二)
2016/07/18 Javascript
JavaScript中子对象访问父对象的方式详解
2016/09/01 Javascript
js 性能优化之算法和流程控制
2017/02/15 Javascript
vue构建单页面应用实战
2017/04/10 Javascript
Js利用console计算代码运行时间的方法示例
2017/09/24 Javascript
AngularJS实现自定义指令及指令配置项的方法
2017/11/20 Javascript
vue.js使用3DES加密的方法示例
2018/05/18 Javascript
qrcode生成二维码微信长按无法识别问题的解决
2019/04/04 Javascript
PyTorch里面的torch.nn.Parameter()详解
2020/01/03 Python
Python内置数据类型list各方法的性能测试过程解析
2020/01/07 Python
基于python纯函数实现井字棋游戏
2020/05/27 Python
浅谈pymysql查询语句中带有in时传递参数的问题
2020/06/05 Python
一篇文章搞懂python的转义字符及用法
2020/09/03 Python
python批量生成条形码的示例
2020/10/10 Python
使用html2canvas实现浏览器截图的示例代码
2018/01/26 HTML / CSS
总经理助理岗位职责
2013/11/08 职场文书
时尚休闲吧创业计划书
2014/01/25 职场文书
教学实验楼管理制度
2014/02/01 职场文书
英文演讲稿开场白
2014/08/25 职场文书
2014迎国庆标语大全
2014/09/19 职场文书
甲乙双方合作协议书
2014/10/13 职场文书
ORACLE数据库对long类型字段进行模糊匹配的解决思路
2021/04/07 Oracle
python开发的自动化运维工具ansible详解
2021/08/07 Python
SQL Server实现分页方法介绍
2022/03/16 SQL Server