首页 > 其他分享 >VSCode创建Vue项目

VSCode创建Vue项目

时间:2022-10-23 21:36:11浏览次数:76  
标签:npm node Vue 项目 VSCode 创建 js vue 安装

一、配置环境
1.安装VS Code
官网下载 https://code.visualstudio.com/ 下载VS Code,按照步骤安装。

2.安装node.js
(1)官网 https://nodejs.org/en/ 下载node.js,按照步骤安装即可,node.js安装完成之后会同步安装npm。

(2)配置环境变量:把node.js安装路径配置到环境变量Path中,使用node.js安装包安装时一般会自动添加环境变量。

(3)查看node.js是否安装成功:打开cmd,输入ndoe -v 和 npm -v 如果显示版本信息,则说明安装成功。

安装Node.js淘宝镜像加速器(有时npm安装失败,可使用cnpm,速度快些)

npm install cnpm -g

3.安装配置脚手架vue-cli

npm install -g vue-cli

脚手架可以帮助我们快速配置项目,打开VScode的终端,输入上述命令,回车,等待安装完成。

 

 

二、创建vue项目

1.命令方式创建

同样也是在vscode终端,输入vue init webpack demo1,初始化一个项目,其中webpack是构建工具,也就是整个项目是基于webpack的,demo1是整个项目文件夹的名称

 

3.启动项目

(1) 打开项目里面的package.json,在vscode终端执行start中的命令npm run dev,启动成功后会出现访问地址。

 

 (2) 进入项目目录,执行npm run dev

根据提示,访问http://localhost:8080

 

标签:npm,node,Vue,项目,VSCode,创建,js,vue,安装
From: https://www.cnblogs.com/ixtao/p/16819599.html

相关文章

  • 学习笔记——Vue
    2022-10-21第一个vue.js<!doctypehtml><head><title>Document</title><!--开发环境--><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.......
  • 2.8 创建文件夹 os.mkdir os.makedirs
    #创建单层文件夹os.mkdir(新文件夹名称)#创建多层文件夹os.makedirs(新文件夹名称)--------------------------------------------------------------------------------......
  • Vue+vite+ts+axios+element plus
    一、介绍vueviteTypeScriptScssElementPlusRouteaxiosVuex二、步骤2.1、创建项目使用Vite快速构建项目Vite是一种新型前端构建工具,能够显著提升前端开......
  • Vue2项目ant-design-vue引入报错问题(已解决✔)
    Vue2项目ant-design-vue引入报错问题安装,引入ant-designnpm installant-design-vue--save一直报错:依赖包:解决方法:一直在报错: error in./node_mo......
  • VUE - 视频流直播
    VUE-视频流直播 推流:将直播的内容推送至服务器的过程。拉流:指服务器已有直播内容,用指定地址进行拉取的过程。 本文主要说的是拉流。也就是客户端播放视频流。 ......
  • vdoing主题vuepress的v1版本集成Artalk
    后端部署https://artalk.js.org/guide/backend/install.html#%E4%BD%BF%E7%94%A8-docker使用docker-compose部署即可,很简单。这里需要注意的是配置https。我的部署结......
  • 【Vue】fullcalendar - next ,prev切换回调处理
    如(4条消息)fullcalendar-next,prev等切换月份回调处理_Q.E.D.的博客-CSDN博客_fullcalendarprev这篇博客所说,fullcalendarnext,prev等切换月份的按钮是没有回调函......
  • 1.Vue系列——Vuex
    Note1-Vuex目录Note1-Vuex1.vuex2.关于状态管理3.安装Vuex4.vuex中的一些核心概念4.1vuex中的状态state4.2vuex中的Getter方法4.3vuex中的Mutation4.4vuex中的Actio......
  • 如何用命令行语句在mysql创建库
    mysql三条创建语句创建库createdatabasediarydefaultcharsetutf8mb4;创建用户createuserdiary@localhostidentifiedby'diary';或createuser'four'@'%'iden......
  • 安装 vue devtools 时,npm i 和 npm run build 报错问题
    1、如果npmi报错,运行如下命令:npmi--legacy-peer-deps 2、如果npmrunbuild报错,运行如下命令:npminstall-gyarnyarninstall 3、在vscode中编辑ma......