Vue脚手架安装使用

1.前言

之前还未完全接触Vue,在做项目时有机会用到了element ui的组件,也了解到Vue的一些基本用法,但都是通过script标签直接本地引入的,这种方式对于单页面的数据双向绑定可以很方便很爽的使用。

再一次由于项目的需求,需要用到路由,用之前的本地引用方式不知道如何解决,无奈只能去研究学习下脚手架了。

vue-cli的作用是下载模版项目,快速拉取相关依赖,类似于Springboot的快速构建,不用理解得复杂了。

2.安装Node.js

具体步骤和更多细节请参考我的另一篇博文:Node.js在Windows下安装和配置
在这里插入图片描述

3.安装脚手架

3.1 Vue-Cli 2(旧版本)

搭建Vue的开发环境 ,全局安装Vue-Cli 2npm install --global vue-cli。安装好后vue -V查看版本信息确认是否安装成功。
在这里插入图片描述

3.2 Vue-Cli 3

与旧版本的区别是Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。如果你已经全局安装了旧版本的 vue-cli(1.x 或 2.x),

你需要先通过 npm uninstall vue-cli -gyarn global remove vue-cli 卸载它。Node 版本要求Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。

安装新版 Vue-Cli 3

npm install -g @vue/cli
# OR
yarn global add @vue/cli

查看版本:
vue -V OR vue --version

4.创建项目

首先在cmd命令行中进入项目要存放的目录,在该目录下使用命令:vue create <Project Name>(旧版本请用vue init webpack <Project Name>),将<Project Name>替换成自己命名的项目名即可创建项目,跟着导航选择,完成初始化即可。cd入项目目录后再用npm run serve启动项目(旧版本请用npm run dev)。
在这里插入图片描述
根据提示的路径和端口号,打开页面则成功。
在这里插入图片描述

对于旧版本,用上述方式创建的项目,目录结构有点复杂,所以有一种更简洁的创建方式:
通过命令vue init webpack-simple <Project Name>构建项目,cd入项目目录,通过命令npm install下载依赖,最后同样npm run dev运行。这种方式的目录结构就很简洁,更方便。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值