vue+node+webpack搭建环境

时间:2022-01-08 16:50:45

vue+node+webpack搭建环境

一、环境搭建

1.1、去官网安装node.jshttp://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的时候时间很久,可能会超过两个小时

安装语句为:npm install --global vue-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 run dev

              (显然每次修改代码,每次去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": "node build/dev-server.js",

"build": "node build/build.js",

"lint": "eslint --ext .js,.vue src"

}

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

 

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

var uri = 'http://localhost:' + port  

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

var path = require('path')

path又是从哪里来的呢?

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

dev: {

env: require('./dev.env'),

port: 8080,

autoOpenBrowser: true,

assetsSubDirectory: 'static',

assetsPublicPath: '/',

proxyTable: {},

cssSourceMap: false

}

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

vue+node+webpack搭建环境的更多相关文章

  1. vue与webpack开发环境搭建:从无到有

    一个vue从无到有的搭建过程. 一.不论是webpack还是vue,最初的第一步就是安装node.js.它是基石. 从官网下载你需要的安装包:官网下载链接:http://nodejs.cn/downl ...

  2. TypeScript(二)使用Webpack搭建环境

    今天继续来更新,本篇文章我们讲环境搭建,主要分享一些环境搭建的学习资源及安装步骤,解决一些安装时可能会出现的问题.下面就让我们一起进入学习第一步,搭建TypeScript环境:一. 环境搭建1.1. ...

  3. 教你使用Webpack搭建环境 TypeScript (2)

      一. 环境搭建1.1. TypeScript环境安装已经配置好的环境,大家可以直接下载:https://github.com/coderwhy/HYLearnTS.git在上一个章节中我们说过,T ...

  4. vue2.0+element+node+webpack搭建的一个简单的后台管理界面

    闲聊: 今天是六一儿童节哟,小颖祝大家节日快乐哈哈哈.其实这个demo小颖断断续续做了将近两个礼拜了,心塞的,其实这个也没有多难,主要是小颖有点最近事情有点多,所以就把这个一直拖着,今天好不容易做好了 ...

  5. webpack搭建环境步骤

    一.初始化 1.创建文件夹 2.npm init  -y 二.安装webpack 和webpack-cli 1.yarn add webpack webpack-cli@3.3.10 -D (这里指定 ...

  6. vue+django+webpack搭建

    一.前言 最近接手了一个项目,后端是django,前端是django自带的模板,用的是jinja2,写了一段时间发现用起来特别不顺手,于是想在保持现有的模板基础上,引入vue框架,这样同事可以继续用自 ...

  7. Vue项目环境搭建(node+webpack)

    安装node.js 下载地址:https://nodejs.org/en/download/ node -v //查看node.js版本 项目环境配置: 安装vue-cli:npm install - ...

  8. node+webpack+vue的环境搭建

      一般第一次搭建环境的时候,多多少少还是会出点状况的.这个时候多去百度,看牛人怎么解决,然后跟着尝试,多试几遍还是能解决的. 先说一下我安装的过程吧 1.我一开始按照官网的来搭建,失败了.报错内容是 ...

  9. node+webpack环境搭建 vue.js 2.0 基础学习笔记

    npm install -g vue //全局安装vue npm install -g webpack //全局安装webpack npm install -g vue-cli //全局安装vue-c ...

随机推荐

  1. ping(1)

    /* ping program for learning IP protocol author: jeff date: 2014/10/25 */ #include <stdio.h> # ...

  2. seq语句随笔

    1.UNION在进行表链接后会筛选掉重复的记录,所以在表链接后会对所产生的结果集进行排序运算,删除重复的记录再返回结果. 2.UNION ALL只是简单的将两个结果合并后就返回.这样,如果返回的两个结 ...

  3. MyEclipse修改项目名称后,部署到tomcat问题。

    1.问题描述: 修改项目名称后,部署到tomcat server,部署出来的文件夹名还是旧的名称. 2.解决方案: 光把项目重命名是不够的,还要修改一下Myeclipse里面的配置. a). 工程名- ...

  4. &lbrack;STM32F429-DISCO-HAL&rsqb;2&period;先学会点亮LED和使用LCD。。。

      首先就简单的一秒闪烁一次LED灯,进而类比推理其他外设的配置过程.然后呢我们就用上LCD吧,毕竟这块板上占地面积最大的就是这个2.4'LCD了.   先贴出简洁的main函数.很干净,比较容易看懂 ...

  5. &quot&semi;《算法导论》之&OpenCurlyQuote;树’&quot&semi;:AVL树

    本文关于AVL树的介绍引自博文AVL树(二)之 C++的实现,与二叉查找树相同的部分则不作介绍直接引用:代码实现是在本文的基础上自己实现且继承自上一篇博文二叉查找树. 1.AVL树的介绍 AVL树是高 ...

  6. vue的优点

    vue-router 单页面 虚拟DOM https://www.cnblogs.com/oldboyooxx/p/9186482.html

  7. JNUOJ 1180 - mod5

    首先,可以自己先一个超时的标程出来: #include<cstdio> typedef long long ll; ll n,m,cnt; int main() { int t; scan ...

  8. Python作业工资管理系统(第三周)

    作业内容: 实现效果: 从info.txt文件中读取员工及其工资信息,最后将修改或增加的员工工资信息也写入原info.txt文件. 效果演示: 1. 查询员工工资 2. 修改员工工资 3. 增加新员工 ...

  9. C&num;数组存入引用类型

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Cont ...

  10. c&plus;&plus; primer note

    ---恢复内容开始--- 1.decltype 2.auto 3.cbegin 4.cend 5.constexpr 6.(*Parray)[10]=&arr; //Parray 指向一个含有 ...