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 相关文章推荐
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
Jun 18 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
Nov 15 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
Jun 30 Javascript
Validform表单验证总结篇
Oct 31 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
Nov 08 Javascript
JS之if语句对接事件动作逻辑(详解)
Jun 28 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
Vue 页面状态保持页面间数据传输的一种方法(推荐)
Nov 01 Javascript
mock.js模拟前后台交互
Jul 25 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
Aug 15 Javascript
Ant Design的可编辑Tree的实现操作
Oct 31 Javascript
vue 图片裁剪上传组件的实现
Nov 12 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
批量修改RAR文件注释的php代码
2010/11/20 PHP
使用php shell命令合并图片的代码
2011/06/23 PHP
php获取当前时间的毫秒数的方法
2014/01/26 PHP
PHPAnalysis中文分词类详解
2014/06/13 PHP
利用Laravel生成Gravatar头像地址的优雅方法
2017/12/30 PHP
QQ邮箱的一个文本编辑器代码
2007/03/14 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
2013/12/20 Javascript
对new functionName()定义一个函数的理解
2014/05/22 Javascript
node.js中的fs.writeSync方法使用说明
2014/12/15 Javascript
分享20个提升网站界面体验的jQuery插件
2014/12/15 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
javascript中mouseover、mouseout使用详解
2015/07/19 Javascript
Vue2单一事件管理组件通信
2017/05/09 Javascript
jQuery 改变P标签文本值方法
2018/02/24 jQuery
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
2019/03/06 Javascript
javascript定时器的简单应用示例【控制方块移动】
2019/06/17 Javascript
Vue获取页面元素的相对位置的方法示例
2020/02/05 Javascript
Vue实现移动端拖拽交换位置
2020/07/29 Javascript
vue项目查看vue版本及cli版本的实现方式
2020/10/24 Javascript
[03:11]2014DOTA2国际邀请赛-VG掉入败者组 独家专访357
2014/07/19 DOTA
python 查找字符串是否存在实例详解
2017/01/20 Python
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
python中(str,list,tuple)基础知识汇总
2018/02/20 Python
Python 函数基础知识汇总
2018/03/09 Python
Python读取properties配置文件操作示例
2018/03/29 Python
详解Python3中setuptools、Pip安装教程
2019/06/18 Python
Django实现文件上传下载功能
2019/10/06 Python
python和go语言的区别是什么
2020/07/20 Python
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
美国滑板店:Tactics
2020/11/08 全球购物
小学毕业感言150字
2014/02/05 职场文书
四风存在的原因分析
2014/02/11 职场文书
初中军训感想300字
2014/03/05 职场文书
学校创先争优活动总结
2014/08/28 职场文书
花木兰观后感
2015/06/10 职场文书
小学生节约用水倡议书
2019/08/12 职场文书