Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。
下面介绍以NPM方式来Vue.js 的安装方法:
在用Vue.js构建大型应用的时候推荐使用NPM安装方法,NPM能很好的和诸如Webpack或者Browserify 模块打包器配合使用。Vue.js 也提供配套工具来开发单文件组件。
首先,先列出我们接下来需要的东西:
- node.js环境(npm包管理器)
- vue-cli 脚手架构建工具
- cnpm npm的淘宝镜像
1) 安装node.js
从node.js官网下载并安装node,安装过程很简单,这里我以下载压缩包方式来,解压就能用了
首先下载安装包
https://nodejs.org/en/download/
点击下载相应的zip版本
然后将文件夹解压到任意目录
比如我这里解压到了:C:\Program Files\nodejs中
然后在这个目录下新建两个文件夹
node-cache
node-global
这是用来放npm全局模块的安装目录,也可以放到其他地方。
配置环境变量
新建一个系统变量
变量名:NODE_HOME
变量值(你的安装目录):C:\Program Files\nodejs
编辑Path变量
新增两个条目
%NODE_HOME%
%NODE_HOME%\node-global
打开CMD,如果执行的时候报错,试着换用管理员运行
运行下面的命令,这里的地址也是安装目录
npm config set prefix "C:\Program Files\nodejs\node-global"
npm config set cache "C:\Program Files\nodejs\node-cache"
设置npm国内源(可选):
npm config set registry "https://registry.npm.taobao.org"
测试,运行下面的命令有版本出现即可
若出现相应的版本号,则说明你安装成功了。
到目前为止,node的环境已经安装完成,npm 包管理器也有了,由于有些npm资源被屏蔽或者是国外资源的原因,经常会导致npm安装依赖包的时候失败,所以我们还需要npm的国内镜像----cnpm.
2) 安装cnpm
在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org ,然后等待,没报错表示安装成功,如下图:
完成之后,我们就可以用cnpm代替npm来安装依赖包了。如果想进一步了解cnpm的,查看淘宝npm镜像官网。
3) 安装vue-cli 脚手架构建工具
在命令行中运行命令 npm install -g vue-cli ,然后等待安装完成。
通过以上三部,我们需要准备的环境和工具都准备好了,接下来就开始使用vue-cli来构建项目。
首先我们要选择存放项目的位置,然后再用命令行将目录转到选定的目录,在这里,我选择在D盘下创建新的目录(nodetest 目录),用cd 将目录切到该目录下,如下图:
在nodetest 目录下,在命令行中运行命令 vue init webpack firstapp 。解释一下这个命令,这个命令的意思是初始化一个项目,其中webpack是构建工具,也就是整个项目是基于webpack的。其中firstapp是整个项目文件夹的名称,这个文件夹会自动生成在你指定的目录中(我的实例中,会在nodetest 目录生成该文件夹),如下图。
运行初始化命令的时候会让用户输入几个基本的配置选项,如项目名称、项目描述、作者信息,对于有些不明白或者不想填的信息可以一直按回车去填写就好了,等待一会,就会显示创建项目创建成功,如下图:
接下来,在notetest目录下去看是否已创建文件:
介绍一下目录及其作用:
build:最终发布的代码的存放位置。
config:配置路径、端口号等一些信息,我们刚开始学习的时候选择默认配置。
node_modules:npm 加载的项目依赖模块。
src:这里是我们开发的主要目录,基本上要做的事情都在这个目录里面,里面包含了几个目录及文件:
assets:放置一些图片,如logo等
components:目录里放的是一个组件文件,可以不用。
App.vue:项目入口文件,我们也可以将组件写这里,而不使用components目录。
main.js :项目的核心文件
static:静态资源目录,如图片、字体等。
test:初始测试目录,可删除
.XXXX文件:配置文件。
index.html:首页入口文件,可以添加一些meta信息或者同统计代码啥的。
package.json:项目配置文件。
README.md:项目的说明文件。
这就是整个项目的目录结构,其中,我们主要在src目录中做修改。这个项目现在还只是一个结构框架,整个项目需要的依赖资源都还没有安装。
安装项目所需要的依赖:执行 cnpm install (这里可以用cnpm代替npm了)
安装完成之后,会多一个node_modules文件夹,这里面就是我们所需要的依赖包资源。
运行项目
在项目目录中,运行命令 npm run dev ,会用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。
看到这里 你已经把握使用npm方式安装vue了