首页 > 其他 > 详细

vue脚手架安装配置

时间:2020-06-06 13:40:39      阅读:73      评论:0      收藏:0      [点我收藏+]

搭建vue脚手架

下载vue.js

vue官网:https://cn.vuejs.org/
?
vue.js文件,右键保存到磁盘:
https://cdn.jsdelivr.net/npm/vue/dist/vue.js

 

 

 

nodejs的下载安装

http://nodejs.cn/download/

 

 

技术分享图片

下载文件解压

技术分享图片

在其中新建两个文件夹

node-cache :npm缓存路径
node-global :npm安装位置

 

 

技术分享图片

配置环境变量

新建NODE_HOME

技术分享图片

编辑Path环境变量:增加

%NODE_HOME%
%NODE_HOME%/node-global

技术分享图片

 

技术分享图片

 

测试安装

控制台输入:
node -v
npm -v
?
通过命令配置两个自己建立的路径:
npm config set prefix "D:\program\node-v14.4.0\node-global"
npm config set cache "D:\program\node-v14.4.0\node-cache"

 

 

技术分享图片

使用淘宝镜像
npm config set registry https://registry.npm.taobao.org
npm config get registry

 

 

技术分享图片

 

安装打包工具:
npm install webpack -g

 

 

技术分享图片

 

vue脚手架工具安装

npm install -g @vue/cli

 

 

技术分享图片

脚手架安装成功测试

 

技术分享图片

 

命令行新建项目

vue create demo
进入如下界面:可以默认自动创建,可以手动选择特性(示例中使用手动)
 

技术分享图片

空格键为确认/取消操作

技术分享图片

技术分享图片

当前配置创建模板,输入模板名称

技术分享图片

自动拉取项目模板

技术分享图片

创建完成

技术分享图片

 

启动项目

 
 
 
xxxxxxxxxx
 
 
 
 
cd demo
npm run serve
 

技术分享图片

 

 

运行起来

 
 
 
xxxxxxxxxx
 
 
 
 
浏览器输入网址:
http://localhost:8081/
 

技术分享图片

 

 

vue脚手架安装配置

原文:https://www.cnblogs.com/miax/p/13054150.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!