写给女朋友的vue教程（一）

开篇

昨天女朋友跟我讲说他们公司要用vue写一个项目，但是他不会。这是这一系列文章的背景。

本JАVA程序员一枚，前端也有所涉猎。什么easyui,bootstarp,mui分分钟上手就来（仅次于写写业务代码，大佬轻喷）

好了，不废话了，开始学习这个框架，并且记录下来，供女朋友参考

VUE是什么

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

安装

依旧几步走：

安装node.js 在里面下载安装就好了安装之后可以在CMD下面测试一下是否安装好 node -v看有没有版本提示安装一下淘宝的包管理工具cnpm，以免有些包被墙了

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

同1 安装好之后 cnpm -v 查看是否安装成功就是看看有没有版本提示

开始安装vue

cnpm install vue

我喜欢直接用脚手架，减少学习成本，方便直接上手

cnpm install –global vue-cli

使用脚手架创建一个项目，注意，使用cmd切换到你需要在哪创建项目的文件夹，然后执行下面的初始化功能，他会创建一个文件夹，里面就会有vue开始的写代码的地方

myfristvue为要创建的项目名字

vue init webpack myfristvue

回车之后会提示以下的内容

这里面包含了对项目的描述 项目名字，项目描述，项目作者等一些内容，输入之后，就创建了一个有基本项目结构的代码，基本结构如下图

然后我先测试一下看项目能不能跑，出异常，如图

这类的错误应该是项目没有构建项目里面的依赖的问题，然后解决一下

cnpm install

然后继续

npm run dev

后面的网址就是直接去打开，打开之后就是初始界面了

本文出自 Congz.club