Node.js和VUE环境搭建及一系列问题解决

原因:由于最近技术渐长,于是想把原来的ssm项目改成前后端分离,综合几位大佬的意见决定前端采用vue。

安装体验:极差,几乎碰到了在百度上能看的问题。幸好在百度了一大圈后解决。

接下来我将从node.js安装一直叙述到vue项目的运行,也就是命令行 npm run dev这块。由于本文引用了大量其他博主的资料,所以就不再注明出处了。

一.node.js安装

 

1.Node.js 安装包及源码下载地址为https://nodejs.org/en/download/。

 点击Windows Installer安装即可,过程中把能勾的都勾上。

2.

安装完后就是测试是否安装成功:在命令行直接运行node -v,出现如下所示,ok一部分

因为node.js需要npm(npm是什么东东?npm其实是Node.js的包管理工具(package manager)),npm已经在Node.js安装的时候顺带装好了。在命令提示符或者终端输入npm -v,应该看到类似的输出:

如果直接输入npm,你会看到类似下面的输出:

那么node.js就安装完成了

二.搭建vue环境

初学者并不需要知道为什么(包括我。。。。),按照步骤来就行

1.搭建vue-cli脚手架工具:

在命令行运行:npm install --global vue-cli。安装过程看网速,2-3分钟。

写在前面:由于后面安装下载问题,所以我都用了cnpm,极力推荐大家使用。因为用npm时老是中断,但是用cnpm又快又稳。

cnpm安装:命令行直接输入即可。下载后即可用cnpm。

 npm install -g cnpm --registry=https://registry.npm.taobao.org

2.创建vue项目

在命令行cd进入你想保存项目的文件夹:

运行

vue init webpack 项目名

这一般不会出错。进行下一步

3.下载项目依赖(至关重要)

cd进入你上一步创建的项目,例如项目名为Test->cd xxxxxx/Test即可,中间xxx则是大家项目不同的路径

输入cnpm install,等待完成即可

cnpm install

 

4.运行项目

在上一步的路径下输入

npm run dev

 

如果成功会显示:

 

到了此步那么本文致力所解决的问题就达到了。

 

 

下来是本人运行npm run dev是的各种错误及解决办法

1.提示 'webpack-dev-server' 不是内部或外部命令

运行:npm install -g webpack-dev-server即可。也 可换为cnpm.......

2.Cannot find module 'webpack'

解决办法:命令行输入一下2条命令

cnpm install webpack-cli -g

 

npm install webpack -g

一般就能解决,(本人输入命令后还是报Cannot find module 'webpack',最后看了很大博客,试了很大命令才ok)

命令行输入webpack -v 出现版本号webpack就没问题了

3.出现各种Cannot find module 'XXXXX'.

 

 出现这种问题原因是你没有执行第三步,也就是下载项目依赖,我就是因为这样反反复复搞了1小时才发现问题,大家执行第三步即可。

PS:最近看了很多博客,发现有些人说的话难以理解,语意模糊(可能是自己理解能力差了)。每当看见这些博客我都会在其下留:????或说的根本听不懂之类。本意是让作者好好理清顺序。同理,此后我写博客的时候会尽量从头到尾写出原由,为大家提供可靠的解决方法和经验等。

本人是vue新手,如上面出现错误,还望指正,谢谢

展开阅读全文

Nuxt.js+BootstrapVue+Json-server 基础入门到项目实战

08-18
为什么要学习服务端渲染 nuxt.js ? 现在我们的项目大多数都是SPA(单页面应用),在实际开发过程中单页面应用比之前的模板渲染要好很多,首先单页面应用是前后端分离,架构清晰,前端负责交互逻辑,后端负责数据,前后端单独开发,独立测试。但是,SPA不利于SEO(搜索引擎优化)。让搜索引擎更为信任该网站,通过提升排名获得更多网站流量,对于某些类型的网站是非常有必要的。目前大部分的Vue项目本质是 SPA 应用,React、Angular也都是SPA应用。SPA应用广泛用于对SEO要求不高的场景中。在我们开发的过程中,我们有 SEO 的需求,我们需要搜索引擎更多地抓取到我们的项目内容,此时我们需要SSR。SSR保证用户尽快看到基本的内容,也使得用户体验性更好。 Nuxt.js 是一个 Node 程序,基于vue.js开发的一套服务端渲染的框架,必须使用 Node 环境。我们对 Nuxt.js 应用的访问,实际上是在访问这个 Node.js 程序的路由,程序输出首屏渲染内容 + 用以重新渲染的 SPA 的脚本代码,而路由是由 Nuxt.js 约定好的 pages 文件夹生成的,开发只需要遵循一定的约定,直接使用vue.js开发我们项目也是非常轻松的。 课程案例 (1) HOME PAGE (2) Jokes Page  (3)About Page  课程概述 在本课程中,大喵将使用 nuxt.js + bootstrapVue + json-server 开发实战性质一个入门级项目,带着大家来体验服务端渲染(SSR )项目构建的过程;介绍 nuxt.js项目目录的结构,每个文件夹和文件的基本概念和作用,以及nuxt.config.js 配置文件的基本介绍;页面公共结构处理,路由页面跳转配置处理;axios 接口请求;带着大家来熟悉及掌握 bootstrapVue UI组件库的使用;
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值