从零开始学VUE(一)搭建vue项目

从零开始学VUE(一)搭建vue项目

写在前面

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

一、安装node.js

  1. 进入node.js官网下载最新稳定安装包:https://nodejs.org/en/
    在这里插入图片描述
    下载好后,直接安装到指定目录就可以。

  2. 安装完成后,打开命令行,输入node -v 来判断是否安装成功并查看安装版本
    在这里插入图片描述

  3. 安装node的时候,npm包管理器会自动安装,可以在命令输出 npm -v 看看是否安装成功
    在这里插入图片描述

  4. 安装vue-cli脚手架:

    npm install -g vue-cli
    

    在这里插入图片描述
    到此,vue开发环境安装完成,接下来就开始创建项目并运行。

二、创建项目并运行

  1. 在命令行中输入:

    vue init webpack your-Project-Name
    

    其中your-Project-Name是我们要创建的项目的名称,例如,我的项目名称为vue-demo
    在这里插入图片描述

  2. 确认项目名称,直接回车
    在这里插入图片描述

  3. 继续配置项目
    在这里插入图片描述

  4. 项目创建完成
    在这里插入图片描述

  5. 项目代码完成后,可以到项目目录下进行查看
    在这里插入图片描述

  6. 安装项目所需要的依赖包

    npm install
    

    在这里插入图片描述

  7. 运行项目

    npm run dev
    

    在这里插入图片描述

  8. 项目运行完成后,会在命令行中打印出访问地址,直接在浏览器地址栏中输入访问即可

     http://localhost:8080
    

    在这里插入图片描述
    至此,一个最简单的vue项目就已经创建并运行完成,用户操作起来非常简单,是因为vue-cli脚手架已经做了非常多的初始化工作,接下来将一一了解。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

AlwaysWM丶

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值