vue-cli脚手架安装环境配置与创建脚手架项目教程

释放双眼,带上耳机,听听看~!

介绍

Vue CLI是一个基于 Vue.js 进行快速开发的完整系统。使用vue脚手架后我们开发的页面将是一个完成的系统(项目)。脚手架将vue的每个组件都做成了单独的文件,为你提前准备好了一个半成品的项目,使你可以基于这个半成品的项目进行快速开发。

vue CLI安装

一、node.js安装

1.如果需要安装vue-cli脚手架,必须先安装好node.js的环境

官方地址:https://nodejs.org/zh-cn/download/

vue-cli脚手架安装环境配置与创建脚手架项目教程插图

2. 下载完成后直接点击安装即可傻瓜式安装。

vue-cli脚手架安装环境配置与创建脚手架项目教程插图1

3.勾选同意点击next即可。

vue-cli脚手架安装环境配置与创建脚手架项目教程插图2

4.这儿切记,需要勾选 add to path 如果没有勾选,则需手动配置环境变量。

vue-cli脚手架安装环境配置与创建脚手架项目教程插图3

5.直接下一步。

vue-cli脚手架安装环境配置与创建脚手架项目教程插图4

6.在下一步。

vue-cli脚手架安装环境配置与创建脚手架项目教程插图5

7.耐心等待进度完成。

vue-cli脚手架安装环境配置与创建脚手架项目教程插图6

8.点击finish即可完成安装。

vue-cli脚手架安装环境配置与创建脚手架项目教程插图7

二、环境准备

1. 在黑窗口cmd 输入 node -v ,npm -v 验证安装是否成功

vue-cli脚手架安装环境配置与创建脚手架项目教程插图8

2.在配置npm 的淘宝镜像  npm config set registry https://registry.npm.taobao.org/

vue-cli脚手架安装环境配置与创建脚手架项目教程插图9

3.出来下面内容说明验证成功了。

vue-cli脚手架安装环境配置与创建脚手架项目教程插图10

4.新建文件夹node_space 在该文件夹下新建两个文件夹 npm_cache  npm_global

vue-cli脚手架安装环境配置与创建脚手架项目教程插图11

5.配置npm下载依赖的位置

  • npm config set cache "E:\the3phases\node_space\npm_cache"
  • npm config set prefix "E:\the3phases\node_space\npm_global"

vue-cli脚手架安装环境配置与创建脚手架项目教程插图12

6.npm config ls 验证下是否成功。

vue-cli脚手架安装环境配置与创建脚手架项目教程插图13

三、安装脚手架

1.上面都没问题的话直接来 安装脚手架

  • 安装脚手架:npm install -g vue-cli
  • 卸载脚手架:npm uninstall -g vue-cli
vue-cli脚手架安装环境配置与创建脚手架项目教程插图14

安装脚手架

2.安装完成后查看脚手架版本,出现下面版本代表安装成功  指令:vue -V

vue-cli脚手架安装环境配置与创建脚手架项目教程插图15

注意:vue —V 出现不是内部或外部指令

解决方案:找到vue.cmd文件所在的目录 将该目录添加到系统环境变量的path中
path="xxx;D:\node_space\npm_global;"
重启cmd 再次执行vue -V 出现版本号代表安装成功

vue-cli脚手架安装环境配置与创建脚手架项目教程插图16

四、创建脚手架项目

1.首先来看下如何创建一个脚手架|上面的配置完成后, 输入指令:mkdir vue-project   创建一个项目文件夹。

vue-cli脚手架安装环境配置与创建脚手架项目教程插图17

2.创建好项目文件夹后在输入 cd vue-project 跳到当前项目文件路径上输入指令: vue init webpack 项目名    创建项目(项目名看需求)

vue-cli脚手架安装环境配置与创建脚手架项目教程插图18

  • 相关解释

vue-cli脚手架安装环境配置与创建脚手架项目教程插图19

3.在输入 cd hello_vue 跳到当前项目路径, 然后在输入指令:npm install  (切换到项目的根目录下,每次创建项目都需要执行该步骤)

vue-cli脚手架安装环境配置与创建脚手架项目教程插图20

4.耐心等待完成上面完成,在输入指令启动项目即可  指令:npm run dev | npm start

vue-cli脚手架安装环境配置与创建脚手架项目教程插图21

5.访问路径:http://localhost:8081 出现下面页面说明创建成功了。

vue-cli脚手架安装环境配置与创建脚手架项目教程插图22

给TA买糖
共{{data.count}}人
人已赞赏
经验分享

在IDEA开发工具上如何部署Tomcat服务器以及部署Maven创建web项目

2021-7-17 15:48:02

经验分享

在Linux系统开发时-如何在Linux系统上安装Java_JDK工具包呢

2021-8-26 22:56:56

⚠️
初柒印象所有资源均是用户投稿及网上搜集,仅供网友学习交流,未经初柒作者或上传书面授权,请勿作他用。
若您的权利被侵害,请联系站长 QQ: 1005406289 或者 留言反馈 ,我们将尽快处理。
官方邮箱:chuqiyx@88.com
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索