初识Vue

314 阅读2分钟

一、Vue简介

Vue是一套用于构建用户界面的渐进式框架

渐进式:可以控制一个页面的一个标签,也可以控制一系列标签,还可以控制整个页面,甚至可以控制整个前端项目

Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

二、Vue环境简单搭建

1.cdn引入

<script src="https://cn.vuejs.org/js/vue.js"></script>

2.本地导入

去vue官网下载之后,放到你的项目中然后导入

三、其他工具

现在的前端技术都离不开npm包去管理编译流程,npm是node.js的包管理工具,vue脚手架的搭建也是需要npm进行操作,所以学习vue之前必须要了解node.js

1.安装node.js

可以直接到node.js的官网下载安装,选好跟自己电脑对应的系统版本进行安装,输入 node-vnpm-v 如果能显示出版本号就说明安装成功了。

2.vue脚手架的搭建

安装完node之后我们就可以使用npm安装 vue-cli了,直接全局安装。

npm install vue-cli -g 因为使用npm下载东西访问的是外网需要 翻 墙 速度会很慢,所以推荐大家使用国内的良心淘宝镜像,也就是cnpm来进行安装。

可自行进入cnpm的官网,但是要注意一点安装完cnpm之后一定要使用 cnpm-v 查看版本号,否则有可能会安装不成功。cnpm的使用就是把npm换成cnpm即可。

安装完vue-cli之后就是vue项目的搭建了

vue create demo

四、创建项目

打开黑窗口-->打开cmd-->使用cd 进入需要创建项目的目录-->输入vue create demo-->根据项目需求进行选择:

1.png

2.png

3.png

4.png

5.png

6.png 后面全部直接按回车。 项目创建完成之后,使用npm run dev/serve(根据package.json文件中的scripts对象来跑动项目),出现以下页面就OK啦!

7.png