vue3的学习之路|从hello,vue3开始

YWuHuang
189 阅读1分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

安装

方式一

我们直接在官网下载vue3.js，然后在html代码中使用

方式二

使用CDN的方式 ：

方式三

使用npm的方法：

# 查看版本
$ npm -v
    
#升级 npm
cnpm install npm -g
    
# 升级或安装 cnpm
npm install cnpm -g
    

# 下载最新稳定版
 cnpm install vue@next
    
#下载官方命令行工具
cnpm install -g @vue/cli

#
vue upgrade --next

#vue init 命令创建项目
 vue init webpack 文件名
    
#启动项目
cnpm run dev

vue打包

#vue打包项目使用命令
cnpm run build

第一个实例

Vue.js是一套构建用户界面的渐进式框架。Vue 只关注视图层， 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。这也是我学习vue3的第一天

<!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>hello,vue3</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
    <div id="hello-vue3" class="fristDemo">
        {{ message }}
      </div>

      <script>
        const HelloVueApp = {
          data() {
            return {
              message: 'Hello Vue3!'
            }
          }
        }
        
        Vue.createApp(HelloVueApp).mount('#hello-vue3')
        </script>
</body>
</html>

浏览器效果：

image.png

我遇到的问题

使用 cnpm install -g @vue/cli命令行时报错

image.png

问题解决

在我百度的时候，都说是因为cnpm版本过高，需要卸载然后重新下载低版本。我们去github上查看官方回答发现：

image.png 然后我们使用命令行

    #指定版本
    npm install -g cnpm@6.2.0 --registry=https://registry.npmmirror.com

最后问题解决。

avatar
文章
阅读
粉丝