基于vue的web项目搭建（一）（环境篇）

vue的web项目搭建（一）（环境篇）

简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件 。

Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时 [3]  ，Vue.js 也能完美地驱动复杂的单页应用。

特点

易用

在有HTML CSS JavaScript的基础上，快速上手。

灵活

简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。

性能

20kb min+gzip 运行大小、超快虚拟 DOM 、最省心的优化。

目录结构

目录/文件	说明
build	项目构建(webpack)相关代码
config	配置目录，包括端口号等。我们初学可以使用默认的。
node_modules	npm 加载的项目依赖模块
src	包含了几个目录及文件：   assets: 放置一些图片，如logo等。     components: 目录里面放了一个组件文件，可以不用。     App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。     main.js: 项目的核心文件。
static	静态资源目录，如图片、字体等。
test	初始测试目录，可删除
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等。
index.html	首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json	项目配置文件。
README.md	项目的说明文档，markdown 格式

参考

Vue.js 的 API 是参考了AngularJS、KnockoutJS、Ractive.js、Rivets.js。

Vue.js 的 API 的对于其他框架的参考不仅是参考，其中也包含了许多 Vue.js 的独特功能。

环境安装

1.1 所需环境

Node.Js(本人使用的是node.js V8.17.0版本)

1.2 node.js安装流程

1、下载对应你系统的Node.js版本:https://nodejs.org/en/download/
2、选安装目录进行安装
3、环境配置
4、测试

1.3 进入官网下载node.js(以安装node.js V8.17.0版本为例)

 

官方页面直接显示最新版本下载，若想下载低版本可下拉该页面至下图位置进行点击

 

点进去

下载完成后，开始安装Node.js

点击【Next】按钮

修改好目录后，点击【Next】按钮

安装完后点击【Finish】按钮完成安装

至此Node.js已经安装完成，可以先进行下简单的测试安装是否成功了，后面还要进行环境配置
在键盘按下【win+R】键，输入cmd，然后回车，打开cmd窗口

 

 

输入node -v 显示node.js的版本说明已安装成功

输入npm -v显示npm版本说明自带的npm也已经安装成功

 

安装完后的目录如下图所示：