MacOS中安装vue

简单的程序员

发布于 2020-04-20 11:09:40

8660

发布于 2020-04-20 11:09:40

文章被收录于专栏：奕仁专栏奕仁专栏奕仁专栏

这两天闲了学习了一下vue的知识，从环境开始搭起，遇到了一些坑，这里列出来

初学者都知，要搭建vue要安装node的环境，所以，我们先下载node mac os版 node下载地址

安装都是遵循傻瓜式安装方式，一直下一步就好，安装完成之后在终端执行 **npm -v ** 命令

由于node npm是在国外的镜像下使用，是比较慢的，淘宝为我们提供了一套指令，

mac下执行：npm install -g cnpm --registry=https://registry.npm.taobao.org

会发现报错了，原因是没有权限在该文件夹下写入文件，需要用root权限

解决办法：执行sudo npm install -g cnpm --registry=https://registry.npm.taobao.org ，输入root账户的密码，成功！

接下来执行命令cnpm install -g vue-cli 安装vue的客户端命令

安装完毕

初始化项目：新建一个html，引入官方提供的vue.js vue.js

然后编辑html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>

<div id="app">
    <p @click="first">{{ message }}</p>
</div>
</body>

<script>
    var vue = new Vue({
        el: '#app',
        data:{
            message: 'hello world'
        },
        methods:{
            first(){
                console.log(this.message)
            }
        }
    })
</script>
</html>

打开浏览器，运行该html ，得到结果：