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

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 你的项目名
注意项目名不能过短

成功会如下图所示:

运行项目

cd 你的项目名
nmp run serve

成功会如下图所示:
【自用笔记】MacOS安装vue并编写简单代码及问题解决方法(持续更新)_第1张图片

访问网站:http://localhost:8080/【自用笔记】MacOS安装vue并编写简单代码及问题解决方法(持续更新)_第2张图片

代码编写
打开vs code,导入你创建的项目,在App.vue中编写代码
【自用笔记】MacOS安装vue并编写简单代码及问题解决方法(持续更新)_第3张图片

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

另一种方式

新建一个.html文件,引入vue

完整代码示例

<!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>

结果:
【自用笔记】MacOS安装vue并编写简单代码及问题解决方法(持续更新)_第4张图片
ps:本人使用HBuilderX直接运行没有任何问题,用vs code直接运行可能会导致报错"Code language not supported or defined."这时macOS用户可用“option+shift+B”直接在浏览器打开。

你可能感兴趣的:(macos,vue)