VUE安装使用教程详解

如果是简单实用vue的话，可以直接引用js文件。

https://vuejs.org/js/vue.js

但是在构建大型项目的时候推荐使用NPM安装，NPM能够很好的和诸如webpack或Browserify模块打包器配合使用，同时Vue也提供配套工具来开发单文件组件。

1. 安装nodejs

由于npm（nodejs package manager）是nodejs的包管理器，所以要首先安装nodejs，从官网下载相应版本安装即可https://nodejs.org/en/download/。

安装好后打开命令行工具，输入node就进入nodejs的命令模式了：

C:\Users\wangjun>node
> 1+2
3
>

按两次Ctrl+C或者输入.exit就可以退出命令行了。

2. 安装淘宝NPM镜像

由于在国内npm的安装速度太慢，因此可以使用淘宝镜像及其命令cnpm来安装各种包。

安装npm淘宝镜像：

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

安装完成后，后面就可以使用cnpm命令来安装npm包了。

cnpm install {package name}

3. 安装VUE

# 安装稳定版
cnpm install vue

安装完成后默认在用户路径下：

C:\Users\{user_name}\node_modules

在vue包的dist/目录下可以看到Vue.js的各种版本，其中带min的是生产环境的版本，比开发版本vue.js压缩了很多，并且删除了警告。

4. 使用VUE

新建三个文件,其中vue.js需要从网上下载：

my.html
my.js
vue.js

4.1 新建my.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>my html</title>
</head>
<body>
  <div id="app">
    {{message}}
  </div>
</body>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="my.js"></script>
</html>

4.2 新建my.js

var app1 = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

至此vue的是安装和简单使用就完成了。

4.3 遇到的问题

1）报错 Vue is not defined

Uncaught ReferenceError: Vue is not defined
    at my.js:1

原因

先引用了my.js，后引用了vue.js。

解决方案

应该先引用vue.js，后引用my.js才能在my.js中使用vue的语法。

2）报错[Vue warn]: Cannot find element: #app

[Vue warn]: Cannot find element: #app

原因

我把相关的js文件放在head里面，导致文件未加载完成就运行js文件，所以js找不到 #app 。

解决方案

把相关js文件放至尾部，保证页面全部渲染完成才加载js，就可以避免这个错误。

总结

以上所述是小编给大家介绍的VUE安装使用教程详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Vue.js devtool插件安装后无法使用的解决办法

    Vue.js devtool插件安装后无法使用的解决办法

    初次使用Vue.js devtool插件的新人在安装了Vue.js devtool插件后,都会经常有一个疑问.我在chrome浏览器里面已经成功安装好Vue.js devtool插件,怎么点击后提示vue.js not detected,无法正常使用呢?对于这样的问题,新人可能会花费很多时间去找答案,今天我们就来整理了解决方法,希望对大家有帮助. 首先,我们先要确保Vue.js devtool插件已经安装成功了.具体的Vue.js devtool插件的安装方法可以:chrome插件CRX的离线安

  • 在vue项目中安装使用Mint-UI的方法

    在vue项目中安装使用Mint-UI的方法

    一.Mint UI 是 由饿了么前端团队推出的 一个基于 Vue.js 的移动端组件库,具有以下特性: 使用文档: http://mint-ui.github.io/#!/zh-cn Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率. 真正意义上的按需加载组件.可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大. 考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的

  • 使用淘宝镜像cnpm安装Vue.js的图文教程

    前言 Vue.js是前端一个比较火的MVVM框架,要使用它,我们必须提前配置,其中有一种安装方式是使用npm,比较适合比较大型的应用.今天就来看看这种方式如何操作,由于npm是国外的,使用起来比较慢,我们这里使用淘宝的cnpm镜像来安装vue. 步骤 首先我们需要下载npm,因为我已经提前安装了node.js,安装包里面集成了npm,然后我们就可以利用npm命令从获取淘宝镜像的cnpm了. 1.打开命令行窗口,输入 npm install -g cnpm --registry=https://r

  • vue项目国际化vue-i18n的安装使用教程

    前言 项目需要支持多语言,我们需要提取出项目中使用的静态文本,使用语言包进行管理, 当切换语言设置的时候,可以自动切换整个项目的文字显示. 发现Vue项目中有对应的组件 vue-i18n ,而且对项目的代码修改不大,于是就使用了这个组件去修改项目中的代码.下面话不多说了,来一起看看详细的介绍吧. 安装 // script 引入 <script src="https://unpkg.com/vue/dist/vue.js"></script> <script

  • 详解使用nodeJs安装Vue-cli

    详解使用nodeJs安装Vue-cli

    前提:nodeJs本地已安装. 1.执行npm install --global vue-cli ,全局安装vue-cli ----因为默认是从国外服务器下,可以使用阿里巴巴在国内的镜像服务器. 产生通过config命令设置默认下载路径: npm config set registry https://registry.npm.taobao.org 然后再执行: npm install --global vue-cli 2.安装后,检查是否安装成功 vue -V (在此注意V为大写) 3.使用v

  • Vue学习笔记进阶篇之vue-router安装及使用方法

    Vue学习笔记进阶篇之vue-router安装及使用方法

    介绍 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现页面切换和跳转的.在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换. 本文是基于上一篇文章(Vue学习笔记进阶篇--vue-cli安装及介绍)vue-cli脚手架工具的. 安装 在终端通过cd命令进入到上一篇文章中创建的my-demo1项目目录里

  • Vue项目中使用Vux的安装过程

    Vue项目中使用Vux的安装过程

    最近想用vue+vux写一个项目,于是到vux的官网看了文档开始着手搭建项目,但是遇到一些坑.下面简单说下安装vux 的过程. 默认已安装vue环境 1.安装vux npm install vux --save-dev 2.安装vux-loader npm install vux-loader --save-dev //官网没提安装这个,但是不安装会报错 3.安装less-loader以正确编译less源码 npm install less less-loader --save-dev 4.安装

  • VUE安装使用教程详解

    如果是简单实用vue的话,可以直接引用js文件. https://vuejs.org/js/vue.js 但是在构建大型项目的时候推荐使用NPM安装,NPM能够很好的和诸如webpack或Browserify模块打包器配合使用,同时Vue也提供配套工具来开发单文件组件. 1. 安装nodejs 由于npm(nodejs package manager)是nodejs的包管理器,所以要首先安装nodejs,从官网下载相应版本安装即可https://nodejs.org/en/download/.

  • vue axios用法教程详解

    axios是vue-resource后出现的Vue请求数据的插件.vue更新到2.0之后,作者尤大就宣告不再对vue-resource更新,而是推荐的axios. 下面我们来使用axios npm install axios --save-dev import axios from "axios" 这时候如果在其它的组件中,是无法使用 axios 命令的.但如果将 axios 改写为 Vue 的原型属性,就能解决这个问题 1 1.    Vue.prototype.$ajax=axio

  • MySQL5.6.31 winx64.zip 安装配置教程详解

    MySQL5.6.31 winx64.zip 安装配置教程详解

    #1. 下载 # #2.解压到本地 修改必要配置my*.ini #3.mysql install admin模式启动cmd cd mysql目录/bin 执行安装: mysqld -install 启动mysql服务: net start mysql 关闭mysql服务: net stop mysql #4.mysql 编码配置 <解压版MySQL-5.6.31-winx64 编码配置> 在根目录下面有已经写好的"my-"开头的ini文件,如:my-default.ini.

  • MySql 5.7.17免安装配置教程详解

    1.下载mysql-5.7.17-winx64.zip安装包(链接:https://dev.mysql.com/downloads/mysql/) 2.解压安装包. D:\DevelopTool\mysql-5.7.17-winx64   #解压目录 3.在解压目录下创建一个名为data的文件夹,用来存放数据 D:\DevelopTool\mysql-5.7.17-winx64\data 4.配置启动文件 把 D:\DevelopTool\mysql-5.7.17-winx64\my-defau

  • Mysql5.7.18版本（二进制包安装）自定义安装路径教程详解

    安装路径:/application/mysql-5.7.18 1.前期准备 mysql依赖 libaio yum install -y libaio 创建用户mysql,以该用户的身份执行mysql useradd -s /bin/false -M mysql 下载mysql二进制包并解压 cd /tools wget https://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.18-linux-glibc2.5-x86_64.tar.gz t

  • Centos下编译安装Nginx教程详解

    一.安装nginx时必须先安装相应的编译工具 yum -y install gcc gcc-c++ autoconf automake yum -y install zlib zlib-devel openssl openssl-devel pcre-devel 建立nginx 组 groupadd -r nginx useradd -s /sbin/nologin -g nginx -r nginx id nginx zlib:nginx提供gzip模块,需要zlib库支持 openssl:n

  • centOS7下Spark安装配置教程详解

    环境说明: 操作系统: centos7 64位 3台         centos7-1 192.168.190.130 master         centos7-2 192.168.190.129 slave1         centos7-3 192.168.190.131 slave2 安装spark需要同时安装如下内容: jdk  scale 1.安装jdk,配置jdk环境变量 这里不讲如何安装配置jdk,自行百度. 2.安装scala 下载scala安装包,https://www

  • windows10系统安装mysql-8.0.13(zip安装) 的教程详解

    安装环境说明 •系统版本:windows10 •mysql版本:mysql-8.0.13-winx64.zip •下载地址:http://mirrors.163.com/mysql/Downloads/MySQL-8.0/mysql-8.0.13-winx64.zip 解压安装包 •解压路径:D:\develop\software •解压后mysql根目录:D:\develop\software\mysql-8.0.13-winx64 原则: 安装目录不能有空格.不能有中文 配置文件 •my.i

  • WINDOWS下安装MYSQL教程详解

    WINDOWS下安装MYSQL教程详解

    1.下载安装包 -根据自己电脑系统选择合适的版本:https://dev.mysql.com/downloads/mysql/ 2.配置环境变量 2.1 解压所下载的压缩包 2.2 环境变量 win 10 电脑 这么进去 3.生成data文件 在你解压的目录下,eg:F:\Program Files\mysql-8.0.17-winx64\bin,以管理员身份运行cmd 执行mysqld --initialize-insecure --user=mysql 在eg 目录下生成data目录 4.安

  • mysql-5.7.21-winx64免安装版安装--Windows 教程详解

    1  下载 地址是:https://dev.mysql.com/downloads/mysql/ 2  解压到目录 3  配置 新建一个txt文档,另存为my.ini,放在MySQL目录下 [mysql] # 设置mysql客户端默认字符集 default-character-set=utf8 [mysqld] #设置3306端口 port = 3306 # 设置mysql的安装目录 basedir=D:\Program Files\mysql-5.7.21-winx64 # 设置mysql数据

随机推荐