Vue入门

最新推荐文章于 2023-04-02 11:15:07 发布

李胖圆

最新推荐文章于 2023-04-02 11:15:07 发布

阅读量124

点赞数 2

分类专栏：记录全面实例文章标签： vue 前端

本文链接：https://blog.csdn.net/weixin_45686583/article/details/115467420

版权

实例同时被 3 个专栏收录

51 篇文章 0 订阅

订阅专栏

全面

40 篇文章 0 订阅

订阅专栏

记录

32 篇文章 0 订阅

订阅专栏

Vue入门

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。
Vue 只关注视图层，采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

安装nodejs 配置淘宝源

NodeJS地址：http://nodejs.cn/download/
最新版NodeJS已集成npm,不需要单独安装npm ，安装一路下一步。

1、cmd配置淘宝源
npm install -g cnpm --registry=https://registry.npm.taobao.org
若不识别npm命令，则重启电脑。

2、校验是否成功
cmd输入： cnpm -v

使用vue-cli创建工程

1、vue-cli是vue出品的脚手架
为单⻚⾯应⽤ (SPA) 快速搭建繁杂的脚⼿架。

2、vue-cli 的安装（cmd安装) 该命令，不需要重复执行
cnpm install -g @vue/cli
cnpm install -g @vue/cli-init

3、cmd 执行工程创建
vue create my-project（项目名）

实例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>vue快速入门</title>
    <!-- 在线生成工具 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        {{msg}}
    </div>
    
    <script>
        new Vue({
          el:"#app",        
          data:{            
            msg:"冰冰你好" 
          },          
          methods:{        

          }        
        })
    </script>

</body>
</html>

结果是：
在这里插入图片描述

李胖圆

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
Vue入门

Vue入门Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。Vue 只关注视图层，采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。安装nodejs 配置淘宝源NodeJS地址：http://nodejs.cn/download/最新版NodeJS已集成npm,不需要单独安装npm ，安装一路下一步。1、cmd配置淘宝源npm install -g cnpm --registry=
复制链接

扫一扫