【自用笔记】MacOS安装vue并编写简单代码及问题解决方法（持续更新）

Bonacci_

已于 2022-08-26 15:13:35 修改

阅读量416

点赞数

文章标签： macos vue

于 2022-08-24 22:29:50 首次发布

本文链接：https://blog.csdn.net/m0_46127484/article/details/126513445

版权

MacOS安装vue并编写简单代码及问题解决方法

准备工作

先进行Node.js的下载: Node.js官网
检测是否安装成功：npm -v

开始安装

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

安装vue-cli 脚手架
sudo npm install -g @vue/cli

创建项目
vue create 你的项目名
注意项目名不能过短

成功会如下图所示：
Alt

运行项目

cd 你的项目名
nmp run serve

成功会如下图所示：
Alt

访问网站：http://localhost:8080/ Alt

代码编写
打开vs code，导入你创建的项目，在App.vue中编写代码
Alt

注意此时控制台要保持打开的状态，项目必须在运行中。

另一种方式

新建一个.html文件，引入vue
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

完整代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>     
    <div id="app">{{name}}</div>
</body>
<script>
     var vm=new Vue({
        el:'#app', 
        data:{
            name:'hello word'
        }
    })
</script>
</html>