Vue.js安装、配置及运行环境搭建(笔记)

什么是vue.js?Vue.js是什么?

在维基百科里的描述:

Vue.js is a popular JavaScript front-end framework that was built to organize and simplify web development.
The project focuses on making ideas in web UI development (components, declarative UI, hot-reloading, time-travel debugging, etc.) more approachable. It attempts to be less opinionated and thus easier for developers to pick up.
It features an incrementally adoptable architecture. The core library focuses on declarative rendering and component composition and can be embedded into existing pages. Advanced features required for complex applications such as routing, state management and build tooling are offered via officially maintained supporting libraries and packages.

vue.js官网中的描述:

Vue.js是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
如果你想在深入学习 Vue 之前对它有更多了解,我们制作了一个视频,带您了解其核心概念和一个示例工程。

作为一个半吊子前端,搞vue.js有那么一点痛苦,折腾了两三天,终于看到了Vue.js的页面,开心~~~

废话不说,进入正题:

安装

我们在用 Vue.js 构建大型应用时推荐使用 NPM 安装, NPM 能很好地和诸如 Webpack 或Browserify 模块打包器配合使用。 Vue.js 也提供配套工具来开发单文件组件。

  Vue.js的推荐开发环境为Nodejs。npm:为Nodejs下的包管理器。由于国内使用npm会很慢,这里推荐使用淘宝NPM镜像(其网址为http://npm.taobao.org/)。我们使用webpack进行资源的合并和打包以及使用vue-cli进行用户生成Vue工程模板。

  那么,我们着重的讲解一下如何搭建一个合适的环境。

(1)如何安装Nodejs

打开Nodejs的官网https://nodejs.org/en/,我们可以在页面最中间看到Download这个词,点击进入后,选择和自己系统对应的版本下载即可,建议下载最新版本。也可以选择下面的Other Downloads下载其他版本。

安装就不在此赘述,根据个人喜好,我个人不喜欢把软件装到C盘,乱七八糟的,时间久不管是电脑还是项目,都会运行吃力。安装完成后可以先进行下简单的测试安装是否成功了,后面还要进行环境配置。在键盘按下【win】键,输入cmd,然后回车,打开cmd窗口,输入node -v和npm -v即可显示当前安装的版本号,即表示安装成功。新版的Node.js已自带npm,npm的作用就是对Node.js依赖的包进行管理,也可以理解为用来安装以及卸载Node.js需要装的东西。

(2)如何配置node.js环境变量配置

这里的环境配置主要配置的是npm安装的全局模块所在的路径,以及缓存cache的路径,之所以要配置,是因为以后在执行类似:npm install express [-g] (后面的可选参数-g,g代表global全局安装的意思)的安装语句时,会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中,占C盘空间。

例如:我希望将模块所在路径和缓存路径放在我node.js安装的文件夹中,则在我安装的文件夹【D:\Program Files\nodejs】下创建两个文件夹【node_global】及【node_cache】如下图:

创建完两个空文件夹之后,打开cmd命令窗口,输入

npm config set prefix “D:\Program Files\nodejs\node_global”

npm config set cache “D:\Program Files\nodejs\node_cache”

接下来设置环境变量,关闭cmd窗口,“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”

进入环境变量对话框,在【系统变量】下新建【NODE_PATH】,输入【D:Develo\nodej\node_globa\node_modules】,将【用户变量】下的【Path】修改为【D:Develo\nodej\node_global】

至此,基础工作准备好了,妈妈,再也担心我会被错误困扰了,如果被这样配置的话,后边安装很麻烦,会报错,如下图:

那么接下来,就进入vue.js的安装。

大家都知道国内直接使用 npm 的官方镜像是非常慢的,这里推荐使用淘宝 NPM 镜像。

淘宝 NPM 镜像是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。

你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:打开cmd输入:

 

注意,安装镜像的时候会有大约1-2分钟的事件,而且要保持网络通畅,要耐心等待。

当出现下图代表这一步已经完成。

(3)安装vue-cli脚手架

  vue-cli是一种全局脚手架用于帮助搭建所需的模板框架,同理在cmd中输入命令:npm install -g vue-cli。在这一段代码中-g是为了全局使用的意思。与cnpm样,安装完成后会显示一长串的文件,输入 vue -v可以查看vue版本。此时,环境已经基本搭建成功。

(4)测试,创建第一个Vue.js项目

首先,在你的项目目录下新建文件夹,同项目文件夹名一样 ,然后,cd进入对应的文件目录下,例如,我的项目在my_site,那么使用d:进入对应的盘符,接着,具体的目录则在命令行输入cd D:\myphp_www\PHPTutorial\WWW\site

  在命令行中输入:vue init webpack my_site (my_site项目文件夹名),休息片刻,精彩马上回来……

红框里边是你项目的资料信息,就根据自己的需求进行选择了,看不懂英文的我也帮不上忙,就自行百度吧。

通过输入cd  my-site就可以进入目录具体文件夹命令行中输入:cnmp install或者npm install安装依赖包。重新打开路径下的文件夹,可以看到文件夹中比之前的文件夹多了一个node_modules文件夹,到此脚手架安装完成。 (新版会自动安装node_modules)

(5)运行vue

       首先cd ,进入指定的路径目录下,然后使用npm run dev命令运行应用,如图:

  此命令会用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

  这里简单介绍下 npm run dev 命令,其中的“run”对应的是package.json文件中,scripts字段中的dev,也就是 node build/dev-server.js命令的一个快捷方式。

项目运行成功后,浏览器会自动打开localhost:8081(如果浏览器没有自动打开,可以手动输入)。运行成功后,会看到如下所示的界面。此时,任务完成。

Back to Top