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}}人
人已打赏
随心笔记

Spring框架+Struts2框架整合步骤流程-Spring框架

2021-7-26 13:35:08

随心笔记

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

2021-8-26 22:56:56

⚠️
版权声明:
1、本网站名称:初柒印象
2、本站永久网址:http://chuqiyx.com
3、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长QQ 1005406289进行删除处理或者留言反馈,我们将尽快处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报!
6、本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索