首页技术正文

非nodejs方式的vue.js的使用

程序员东波技术 2022年11月21日

0 收藏 994 点赞 3,977 浏览 984 个字

1、node环境

详细见我之前的文章，node的安装

2、git环境

git bash命令窗，支持bash命令，cmd不支持bash命令

3、cnpm安装

cnpm是针对国内使用npm网络慢的而使用的

在cmd中输入：

npm install -g cnpm –registry=https://registry.npm.taobao.org
如果node的版本比较低，会执行不成功。需要升级node的版本，直接下载最新的node覆盖安装

4、下载vue.min.js和vue-resource.min.js

这是使用cnpm的方式

打开git bash，输入：cnpm install vue

　　　　　　　输入：cnpm install vue-resource

将下载到的vue.min.js和vue-resource.min.js放到项目中

5、截图说明

将title的值在data中绑定为hello vue，然后执行cartView方法，将title值修改为Vue hello

6、index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0">
    <title>Title</title>
</head>
<body>
<div id="app">
<h2>{{title}}</h2></div>
<script src="js/lib/vue.min.js"></script>
<script src="js/lib/vue-resource.min.js"></script>
<script src="js/cart.js"></script>
</body>
</html>

7、cart.js

/**
 * Created by kk on 2017/4/16.
 */
var vm =new Vue({
    el:"#app",
    data:{
        title:"hello vue"
    },
    filters:{    },
    mounted:function () {
        //类似于jquery中的ready方法
        this.cartView();
    },
    methods:{
        cartView:function () {
    this.title="Vue hello"
}
    }});