Vue安装并创建项目

最新推荐文章于 2024-06-13 22:07:17 发布

C++业余爱好者

最新推荐文章于 2024-06-13 22:07:17 发布

阅读量294

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/ChengR666/article/details/116140633

版权

前端开发专栏收录该内容

10 篇文章 1 订阅

订阅专栏

vue是基于node.js框架,很好的实现了mvvm,是一种轻量级的渐进式框架。
MVVM思想:view—viewmodel–model,view与model的数据通过viewmodel实现了数据的双向绑定。
安装
安装vue，cmd命令运行： npm install vue
安装vue脚手架 npm install -g @vue/cli

创建项目 helloworld
新建项目文件夹例如vueTest,使用vscode打开文件夹.
终端输入命令:
npm init -y 初始化
npm install vue 安装vue

PS C:\Users\Administrator\Desktop\vue01> npm  init -y
Wrote to C:\Users\Administrator\Desktop\vue01\package.json:

{
  "name": "vue01",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}


PS C:\Users\Administrator\Desktop\vue01> npm install vue
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN vue01@1.0.0 No description
npm WARN vue01@1.0.0 No repository field.

+ vue@2.6.12
added 1 package from 1 contributor in 0.907s

现在vue就安装完成了,在项目下创建index.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>
    <div id="app">
        <h1>{{name}} Hello world</h1>
    </div> 
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        let vm =new Vue({
            el:"#app",
            data:{
                name:"Vue"
            }
        });
    </script>
</body>
</html>

C++业余爱好者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue安装并创建项目

MVVM思想:view—viewmodel–model,view与model的数据通过viewmodel实现了实时刷新.vue是基于node.js框架,很好的实现了mvvm,是一种轻量级的渐进式框架,示例:helloworld一新建项目文件夹例如vueTest,使用vscode打开文件夹,终端输入命令 npm init -y 初始化项目npm install vue 安装vuePS C:\Users\Administrator\Desktop\vue01> npm init -yWr
复制链接

扫一扫