Vuejs入门配置和一些常用报错内容及解决方案

177 阅读5分钟

曾几何时听过这样一句话:2016年是JavaScript最火的一年;因为涌现出了很多优秀的前端框架,比如:vue,ng,react 这三个以react为首的被称作前端三大框架。听着就很吊,有木有?原先一直只玩过jquery,此框架在原生JavaScript基础上做了大量改进比如对一些浏览器兼容性上,对dom节点的读取和渲染上都做了很多便利的输出。

这段时间有幸接手之前交由外包团队做的前端项目,很显然是很牛逼的那种!用的就是Vue. 自己在一个人的情况下独自接手该项目,刚一开始的时候真的是无从下手,后面加了几次班也算是小小的入门的了,此外在百度或者其它交流群中也看了,市面上像这种从0开始学Vue的教程真的是少之又少,特此想简短的记录一下,我两周前开始学vue的感受,顺便也给想从jq转Vue的同学一点点参考.

第一步:首先去nodejs官网(https://nodejs.org/en/)下载最新的node包(个人而言喜欢用最新的,就像女朋友,我喜欢是处女一样)

下面截图是最新的node安装包,不要下错了哦(其实也不会错啦,我相信现在没有谁的电脑会是32位的!!)安装速度跟网络有关

下载完成以后,眼睛闭着一路next安装即可。 我尝试过,你默认安装完成以后,系统环境变量会自动把node的安装路径加到path里。如果没有请自行加上,记得路径不要错,是指到有node.exe的目录;(可参考下面两个截图)

第三步:需要进dos命令行查看所安装的node可以正常使用;其中npm是node下载安装完成之后自带的包管理器,可以使用npm进行安装一些常用modules;(后面会经常使用npm命令)

随即可以执行:

node -v

npm -v

第四步:以上node安装完毕之后就可以开始进入新建vue工程啦;进入某个磁盘执行命令:

npm install --global vue-cli

(以上命令为全局安装vue脚手架--把它理解成让你不需要为编译或其他琐碎的事情而浪费时间,帮助你快速开始一个vue项目,其实其本质就是给你一套文件结构,包含基础的依赖库)

再执行:

vue init webpack my-project

(以上命令是生成一个基于webpack模板的新vue工程,工程的名字是:my-project;当然,名字取啥样,随你意)

再执行:

cd my-project

(以上命令是在dos命令行中指定进入my-project这个工程文件夹里面)

正常情况下是以下截图的样纸;红框里的dist和node_modules文件夹先不要管,我后面会讲解到;

再执行:

npm install

(此命令是为本工程下载安装所有的依赖包文件,也就是上面截图提到的node_modules)

下载安装时可能由于被墙和windows机器本身没mac“速度”的原因会很慢,建议开启vpn,进行翻墙操作,至于如何进行翻墙,,我想你懂得。 哦,这里我说一下,上次我女朋友带有挑逗的语气跟我说,如果她出墙了,我会怎么办?我想了一下,回答说:

你出墙一尺,我挪墙一丈。

然后,,,就没有然后了,咱们继续。

再执行:

npm run dev

(此命令是开启正常开发模式,会正常监听8080端口,默认也会在浏览器开启一个窗口,地址就是:http://localhost:8080/,当然,这里的端口你可以在config文件下的index.js里进行更改)

下面截图是我修改完之后重新执行npm run dev后浏览器上的界面

很显然,可以正常监听我修改后的端口。

咱们再看这里:红框里的 “my-project” 是工程的根目录下的index.html里面的title标识,现在咱们尝试着改下这个标识,比如加个1234什么的,再保存(ctrl+s)操作,再看下这里的标识.

没错!! 已经有热更新的包在里面啦,哇咔咔,是不是很吊很吊的样纸!!

在此之后就可以进行任意修改再保存即可查看效果。很炫很炫有木有?想想以前玩jq,还要清空缓存并硬性重新加载才能看到效果。 刷新浏览器的日子将会一去不复返;

当然,就新建一个工程而言其中可以遇到的问题还有很多,

1、比如下载很慢的常态如何解决?

建议使用淘宝镜像:

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

随后所有用npm命令安装的包文件全部用cnpm代替可能会快一点

2、又如:执行npm run dev 命令下面报

express Error: Cannot find module 'XXX' 我这里给出的建议就是:报错内容说找不到哪个module就安装哪个就行了 npm install xxx 3、比如你从github下载别人上传的工程时,首先阅读md文件说明,一般情况下,会有写如何在本地访问该工程,或者可以将其工程的node_modules包全部删了,自己在本地执行npm install 安装本地依赖文件。

以上内容 仅仅 仅仅 是把工程跑起来,后面要做的还有很多。。。。 相信你和我一样,都喜欢开发,都喜欢前端。