vue安装及入门

Vue开发

---

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