vue教程菜鸟教程（vue入门教程）

大家好，我是讯享网，很高兴认识大家。

 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> <ul></ul>

讯享网

渐进式JavaScript框架，易学易用，性能出色，适用场景丰富的 Web 前端框架

地址：https://cn.vuejs.org/

什么是vue？

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

安装插件 vue.js
创建前端项目 (略)
导入vue.js文件

3.1 vue入门案例

讯享网

3.2 vue指令(很重要)

v-html
v-text
v-bind
v-show
v-on
v-if
v-for
v-model ------MVVM

代码：

3.3 vue侦听属性和计算属性(了解)

watch属性
computed 属性

代码：

讯享网

3.4 vue组件(很重要)

全局组件
任意的挂载点都可以使用

全局组件代码案例：

讯享网

局部组件
只能在某一个vue实例的挂载点使用

局部组件代码案例：

讯享网

3.5 vue路由（很重要）

什么是路由？

后端：对于普通网站，所有的超链接都对应一个url地址，每个url都对应服务器上的资源

前端：对于单页面应用程序来说的，主要通过url中的#（hash）去实现的，(当关于a标签)

路由使用

引入vue-router.js文件

案例：

4.1 什么是nodejs和npm？

*Node：是JavaScript的运行时环境*。Node并不是一个新的语言，只是js的一个环境，同样的比如：tomcat。Node为js提供了更强大的操作方式，如：在浏览器中，js是无法操作文件的，而node提供了文件操作。在浏览器中，js无法写服务接口，node提供了后端代码编写的功能（写后台、操作数据库）。尽管如此，Node依然是个前端技术，并不会真正的使用node去写后端代码，*node更多的是给前端项目做配置*，如：跨域代理。

*Npm：npm是node提供的一个包管理工具，类似于maven*。通过npm去安装依赖包，就不需要在页面上使用script标签引入了。前端也有依赖

命令：-g（globle）全局安装，任何项目都可以用。–save-dev开发环境安装，不会打包到生产。生产安装（默认）

大前端工程: 人家可以使用node js 开发数据接口, 但是nodejs 的速度很差.

4.2 node下载和安装

下载地址： http://nodejs.cn/
安装（略）不要安装在有中文，特殊字符等目录
测试安装是否成功
cmd命令输入 node -v

cmd命令输入 npm -v
npm镜像加速器配置

讯享网

执行命令：npm config set registry https://registry.npm.taobao.org （过期了，不能用了）

npm config set registry https://registry.npmmirror.com/ （可以使用，没过期）

删除淘宝镜像源： npm config delete registry

查看当前镜像源：npm config get registry

清缓存命令：npm cache clean --force

npm 常用命令：

安装命令： npm install xx 简写成 npm i xx

5.1. 什么是vue-cli

vue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。

vue-cli是有Vue提供的一个官方cli，专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成vue.js+webpack的项目模板。

5.2. vue-cli安装

全局安装：

npm install -g @vue/cli

5.3. 查看版本信息

vue -V

5.4. 使用vue-cli创建项目

方式很多，我们这里面使用的是命令(idea)

手动创建： vue create my-project 注意：项目名不能有大写
使用idea创建： (看视频)
启动命令： npm run serve
打包命令： npm run build

单页面组件：以.vue结尾的文件

三部分：

1. template ：编写 html代码

2. script: 编写js代码的

3. style: 编写样式的。

官网地址：https://element.eleme.cn/#/zh-CN/component/installation

使用：

安装： npm i element-ui -S
使用

在 main.js 中写入以下内容：

讯享网

官网地址：起步 | Axios中文文档 | Axios中文网 (axios-http.cn)

下载安装

npm install axios

main.js中配置

点赞关注威: c-j-c