写给女朋友的vue教程(一)

开篇

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

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

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

VUE是什么

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

​ ——来自官方

安装

依旧几步走:

  • 安装node.js 在里面下载安装就好了
  • 安装之后可以在CMD下面测试一下是否安装好 node -v看有没有版本提示

  • 安装一下淘宝的包管理工具cnpm,以免有些包被墙了

1
npm install -g cnpm --registry=https://registry.npm.taobao.org
  • 同1 安装好之后 cnpm -v 查看是否安装成功就是看看有没有版本提示
  1. 开始安装vue

    1
    cnpm install vue
  2. 我喜欢直接用脚手架,减少学习成本,方便直接上手

    1
    cnpm install --global vue-cli
  3. 使用脚手架创建一个项目,注意,使用cmd切换到你需要在哪创建项目的文件夹,然后执行下面的初始化功能

他会创建一个文件夹,里面就会有vue开始的写代码的地方

myfristvue为要创建的项目名字

1
vue init webpack myfristvue

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

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

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

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

1
cnpm install

构建好之后如下:

然后继续

1
npm run dev

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

-------------本文结束感谢您的阅读-------------
0%