1. 资源: https://cn.vuejs.org/v2/guide/#%E8%B5%B7%E6%AD%A5

进入官网学习

2. 点击安装,要把vue下载到本地文件的根目录中,不要选择压缩版的,这样在控制台就能显示自己下载运用的vue拓展程序

3.把它放到文件根目录

4.写vue代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>vue初体验</title>
</head>
<body>
<div id="app">
<h1>vue的例子</h1>
<!-- 3. 双大括号表示插值表达式,在大括号中填写data的属性名 -->
<p>{{msg}}</p>
</div>
<!-- 1.引入本地下载的vue文件 -->
<script src="./vue.js"></script>
<script>
Vue.config.productionTip = false // 关闭生产提示
const vm = new Vue({
// 2. el 就是element的缩写 表示页面元素 表示 Vue对象控制的范围
el: '#app',
// data就是数据模型
data: {
//相当于是model 数据模型
msg: 'hello',
},
})
</script>
</body>
</html>

5.在谷歌浏览器启动开发者模式,引入vue拓展程序

运行自己写的vue代码  打开控制台看看是否有vue

ok 基本的使用已经成功 ^_^

Vue 安装 vue的基本使用 vue的初步使用步骤的更多相关文章

  1. [Vue安装教程]十分钟学会vue 安装

    Vue的安装主要有一下几个步骤: 1.安装npm淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 2.安装脚手架工 ...

  2. Vue安装依赖npm install时报错问题解决方法

    1.vue的安装依赖于node.js,要确保你的计算机上已安装过node.js.    可进入cmd编辑器,输入命令 node -v进行查看.出现版本信息即成功!没有则从浏览器上面下载安装即可,没有安 ...

  3. 前端笔记之Vue(一)初识SPA和Vue&webpack配置和vue安装&指令

    一.单页面应用(SPA) 1.1 C/S到B/S页面架构的转变 C/S:客户端/服务器(Client/Server)架构的软件. C/S 软件的特点: ① 从window桌面双击打开 ② 更新的时候会 ...

  4. VUE 安装&创建一个项目

    1,安装node.js vue依赖nodejs,所以首先要安装node.js 然后打开cmd,输入命令, node -v.正常出现版本号,说明你已经安装成功了 下载地址:http://nodejs.c ...

  5. 安装vue脚手架和vue安装element-ui

    首先下载安装node.js,因为vue依赖node.js,然后用npm安装vue,步骤如下: 安装成功后安装element-UI,步骤如下: 完成后用npm run dev 运行项目.

  6. vue安装教程总结

    转载:https://blog.csdn.net/sunny1660/article/details/78326548 简介:       vue.js是一套构建用户界面的渐进式框架.比较简洁,用于解 ...

  7. vue 安装之路

    vue 来源 1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html) 2.基于node.js,利用淘宝npm镜像安装相关 ...

  8. vue 安装cli3.0版本,创建项目

    注意:Vue CLI需要Node.js版本8.9或更高版本(建议使用8.11.0+). 查看node版本:node -v  , 查看npm 版本  npm -v, 1.首先需要安装node.js环境 ...

  9. vue安装搭建

    title: vue安装搭建 date: 2018-04-21 14:00:03 tags: [vue] --- 安装 首先安装nodejs 直接官网下载最新版本http://nodejs.cn/do ...

  10. vue安装及axios、stylus、iview的安装流程整理

    现在做的项目中主要用到以下几个安装包,所以整理下流程: 使用命令行工具npm新创建一个vue项目 vue中axios的安装和使用 在vue项目中stylus的安装及使用 如何在vue中全局引入styl ...

随机推荐

  1. vue3响应式模式设计原理

    vue3响应式模式设计原理 为什么要关系vue3的设计原理?了解vue3构建原理,将有助于开发者更快速上手Vue3:同时可以提高Vue调试技能,可以快速定位错误 1.vue3对比vue2 vue2的原 ...

  2. 2021.08.09 P6037 Ryoku的探索(基环树)

    2021.08.09 P6037 Ryoku的探索(基环树) P6037 Ryoku 的探索 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 重点: 1.树的性质 2.基环树的性质 ...

  3. Dockerfile 命令详解及最佳实践

    Dockerfile 命令详解 FROM 指定基础镜像(必选) 所谓定制镜像,那一定是以一个镜像为基础,在其上进行定制.就像我们之前运行了一个 nginx 镜像的容器,再进行修改一样,基础镜像是必须指 ...

  4. 前后端分离后台管理系统 Gfast v3.0 全新发布

    GFast V3.0 平台简介 基于全新Go Frame 2.0+Vue3+Element Plus开发的全栈前后端分离的管理系统 前端采用vue-next-admin .Vue.Element UI ...

  5. IDEA编译项目后,target目录下的jsp文件不更新

    tomcat目录说明 先来看一下tomcat的目录: |-bin |-conf |-lib |-logs |-temp |-webapps |-work tomcat 的核心是servlet容器,叫 ...

  6. 新华三Gen10服务器进SSA查看、配置阵列

    1.开机自检进F10 2.F10后选择[smart storage administrator](跳到第5步)或选择第一项IP[intelligent provisioning] 3.选择执行维护 4 ...

  7. [AcWing 75] 和为S的两个数字

    点击查看代码 class Solution { public: vector<int> findNumbersWithSum(vector<int>& nums, in ...

  8. 基于mybatis的java代码生成存储过程

    问题: 项目中目前使用mybatis操作数据库,使用插件(mybatis-generator)自动生成代码,对于增改查,使用存储过程实现了一版本,方便使用. insert代码生成器用法: insert ...

  9. Centos7上安装python3.7

    Centos7安装python3.7 由于python2和python3在很大程度上有些不同,因为需要,就以决定安装python3.x的版本,但由于Centos上自安装的就是pyhton2.6.所以在 ...

  10. 个人冲刺(二)——体温上报app(二阶段)

    冲刺任务:完成app首页.第二页面和特殊情况的页面布局 activity_main.xml <?xml version="1.0" encoding="utf-8& ...