码迷,mamicode.com
首页 > 其他好文 > 详细

vue脚手架安装配置

时间:2020-06-06 12:35:02      阅读:77      评论:0      收藏:0      [点我收藏+]

标签:under   run   city   webp   match   选择   rect   NPU   建模   

搭建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脚手架安装配置

标签:under   run   city   webp   match   选择   rect   NPU   建模   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!