vue安装及入门_制杖豆_vue安装

网络 02-07 1262

Vue开发

文章目录 Vue开发一、Vue是什么？二、Vue安装(npm方法)1.安装node.js2.安装cnpm3.安装vue-cli脚手架构建工具4.安装vue3.0 三、vue使用1、vue ui 四、目录解析

一、Vue是什么？

Vue (读音 /vju?/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

二、Vue安装(npm方法) 1.安装node.js

从node.js官网下载并安装node，安装过程很简单，一直点下一步就ok了，安装完之后，我们通过打开命令行工具（win+R）,输入node -v 命令，查看node的版本，若出现相应的版本号，则说明你安装成功了。

安装完node.js也就有了npm管理器，它是集成在node中的，输入 npm -v 命令，显示npm的版本信息。

2.安装cnpm

在命令行中输入

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

然后等待，没报错表示安装成功.

3.安装vue-cli脚手架构建工具

必须在全局安装在命令行中运行命令 npm install -g vue-cli ，然后等待安装完成。检验是否安装成功：vue -V webpack的版本查询：webpack -v 一般以此法安装的vue为2.0+版本,vue3.0以后的版本有ui界面,所以下面我们对vue进行升级.

4.安装vue3.0

打开控制台,输入 npm install -g @vue/cli 之后可能会发现输入vue ui没有反应输入vue -h查看commands，发现没有ui [oprions]的选项输入cnpm i -g @vue/cli 安装新的脚手架之后再次查看commands,可以发现有ui这个选项了. 至此,vue安装完成.

三、vue使用 1、vue ui

打开控制台,输入vue ui,会出现如下界面,在此界面可以完成vue项目的创建,插件的安装和运行. Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统.

<div id="app"> {{ message }} </div> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })

这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。打开浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，可以看到上例相应地更新。

四、目录解析

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 格式