VIP用户交流群:462197261 收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
在线客服:78895949
tonglan
  • 当前位置:
  • VUE安装使用教程详解

    建站教程 2019年11月09日 关键词:,,

    如果是简单实用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安装使用教程详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对北冥有鱼网站的支持!

    您可能感兴趣的文章:

    • 使用淘宝镜像cnpm安装Vue.js的图文教程
    • Vue项目中使用Vux的安装过程
    • vue项目国际化vue-i18n的安装使用教程
    • 在vue项目中安装使用Mint-UI的方法
    • Vue.js devtool插件安装后无法使用的解决办法
    • Vue学习笔记进阶篇之vue-router安装及使用方法
    • 详解使用nodeJs安装Vue-cli

    广而告之:
    热门推荐:
    函数式编程入门实践(一)

    在文章之前,先和大家讲一下对于函数式编程(Functional Programming, aka. FP)的理解(下文我会用FP指代函数式编程): FP需要保证函数都是纯净的,既不依赖外部的状态变量,也不产生副作用。基于此前提下,那么纯函数的组合与调用,在时间顺序上就不会产生依赖,改变多个函···

    在同一窗体中使用PHP来处理多个提交任务

    在PHP中的处理窗体数据比其它网页程序语言更简单——如果你使用这种语言一段时间后,你会发现这是一个不可争辩的事实。这种操作的简易性使它可以容易地处理更为复杂的窗体事件,包括今天讨论的主题,即在同一个窗体中通过多个按钮来处理不同的任务。为什么使用多个提交任务···

    Nodejs 复制文件/文件夹的方法

    1.使用fs复制文件 使用fs对象的readFileSync,writeFileSync方法进行读写操作复制 cp.js function copyIt(from, to) { fs.writeFileSync(to, fs.readFileSync(from)); //fs.createReadStream(src).pipe(fs.createWriteStream(dst));大文件复制 } copyIt(from.js,to.js); 这···

    DEDE 修改后台图集上传单个图片的大小限制

    默认情况下,DEDE图集中单个图片大小限制在2M以内,而有时我们需要上传一个2M以上的文件,这是只要修改几个文件就可以实现了。 一、需要修改php.ini这个文件,我们必须保证PHP的配置中允许上传一个较大的文件才行,否则后面的工作做了也没用。 打开php.ini,找到如下两个···

    PHP通过curl获取接口URL的数据方法

    如下所示: <?php $weather = curl_init(); curl_setopt($weather,CURLOPT_URL,"https://api.pc2801.com/cqssc/".time()); curl_setopt($weather, CURLOPT_SSL_VERIFYPEER, false); //如果接口URL是https的,我们将其设为不验证,如果不是https的接口,···

    初识通用数据库操作类——前端easyui-datagrid,form(php)

    初识通用数据库操作类——前端easyui-datagrid,form(php),实现代码比较简单,具体实现步骤请看下文。 实现功能:     左端datagrid显示简略信息,右侧显示选中行详细信息,数据库增删改 (1)点击选中行,右侧显示详细信息,其中【新增】、【修改】、【删除】···

    下拉菜单和滑动菜单设计实例

    我找到了很多网站,它们使用下拉菜单或滑动菜单,而且我想,你也可能会对我找到的这些实例感兴趣吧。 请告诉我你是如何看待这些菜单设计的,他们是好还是坏,有哪些优点或者缺点,或者,你发现了还有很多很棒的中文网站的菜单设计,请在评论中写出来,这样,对我,对大···

    Vue实现导航栏点击当前标签变色功能

    本文实例为大家分享了Vue实现导航栏点击当前标签变色功能的具体代码,供大家参考,具体内容如下 1.效果 2.所有代码 <template> <div class="now-time"> <div class="timebox"> <a href="#" rel="external nofollow" v-for="(item,index) in nowTime"···

    vue2.0的contextmenu右键弹出菜单的实例代码

    整理文档,搜刮出一个vue2.0的contextmenu右键弹出菜单的实例代码,稍微整理精简一下做下分享。 1.事情对象 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script src="http://unpkg.com/vue/dist/···

    Laravel执行migrate命令提示:No such file or directory的解决方法

    本文实例讲述了Laravel执行migrate命令提示:No such file or directory的解决方法。分享给大家供大家参考,具体如下: 今天使用Laravel命令行工具操作数据库迁移操作时报错,提示mysql 2002错误,如图: 查看数据库配置没错呀,网站前台也可以打开,说明能连上,那是什么原因···