谷粒商城29- 前端基础 VUE 介绍_npm安装vue

Vue的介绍

npm安装Vue

在vscode中, 打开文件夹, 创建学习vue的文件夹 使用npm init -y命令, 初始化项目 npm init -y 生成了如下的json配置文件 使用node安装vue, 执行如下的命令, 报错如下 npm install vue 根据提示信息, 说了我的项目名称与vue的依赖重名了.

Did you name your project the same
npm ERR! as the dependency you're installing?

解决办法, 把项目重命名. 文件夹从重命名为vue2 , 同时 ,json的配置文件, 也要重命名为vue2

再次执行npm install vue, 可以看到没有报错 并且生成了如下的文件

Vue hello world

新建立一个index.html demo代码如下, 使用name的动态取值

    
    
    Document



    
         {{name}}, 唱歌很好听.  
    

    
        let vm=new Vue({
            el: "#txt",
            data: {
                name: "周杰伦"
            }
        })
    

页面显示如下 在控制台中, 也可以实时的显示name的值 修改name的值为林俊杰. 可以看到页面上直接也显示成了林俊杰