vscode怎么新建vue项目

1：确认必要环境已安装

vscode,和nodejs必须安装好
vscode下载地址：https://code.visualstudio.com/Download
nodejs下载地址：https://nodejs.org/en/download这里写自定义目录标题)

2：在本地创建一个存放工程的目录

我这里放到d:\usr\myvue

3：使用vscode打开上一步创建的文件夹

4：安装vue-cli

vue-cli可以帮助我们快速构建vue项目。
打开终端>新建终端执行命令：npm install -g vue-cli

5：安装webpack

webpack是js的打包工具
在终端中执行命令：npm install -g webpack

6：创建项目

终端中输入：vue init webpack myvue
如果报如下错误：

解决办法：
a：在windows系统中打到windows powerShell,并以管理员身份运行它
b：输入set-ExecutionPolicy RemoteSigned 回车
c：输入y确认
d：再从第五步重新执行即可

7：运行项目

执行命令：cd myvue
执行命令：npm run dev
终端出现浏览器访问地址：http://localhost:8080
说明项目已经创建成功 vscode左侧的目录就会出现vue项目的相关文件夹了

8：项目打包发布线上

重新打开一个终端
输入命令：npm run build
会在项目目录中生成一个dist的文件夹，将此文件夹放到nginx容器中即可运行。

vscode怎么新建vue项目相关推荐

VsCode工具开发vue项目必装插件
VsCode工具开发vue项目必装插件目录 VsCode工具开发vue项目必装插件 1.概述 2.VsCode插件清单 2.1.Vetur插件让vue文件代码高亮 2.2.Vue VSCode Sn ...
mac上搭建vue环境及webstorm新建vue项目
安装nodejs和npm 这个就不细说了,网上有很多相关资料. 注意,如果npm版本低可能不行,升级npm使用命令: sudo npm install -g npm 查看npm版本使用命令 npm - ...
Win10 + VSCode踩坑 + vue项目开发：设置vscode终端为管理员权限
win10系统如何设置vscode的终端为管理员权限? 一次一次的授权太麻烦! 这里直接更改授权为管理员运行即可. 操作与设置步骤: "桌面找到"VSCode"程序图标 ...
VSCode 如何新建vue模板 - 插件引入篇
还在一个代码一个代码的敲打吗? VSCode 如何新建vue模板 ?附图讲解:如何引入插件. 问题: 在哪儿搜索插件? 搜什么名称的插件? 如何安装插件? 解决办法:(上述问题,均如下图所示) 安装完 ...
安装vue环境，并新建Vue项目
一.安装vue环境,并新建Vue项目首先我们上node.js官网(https://nodejs.org/zh-cn/),下载最新的长期版本,直接运行安装完成之后, 我们就已经具备了node和npm的 ...
使用VSCode创建一个Vue项目
使用VSCode创建一个Vue项目 vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. 安装vue-cli之前,需要先安装了vue和webpack · node -v //( ...
解决使用webstorm新建vue项目时‘gyp: No Xcode or CLT version detected!’报错
在使用webstorm新建vue项目时,遇到了下面的错误 No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.No rece ...
新建vue项目并引入element组件
从新建vue项目到引入组件Element 以及Error when rendering component报错解决一.新建项目 1.打开cmd,运行:vue init webpack Vue-Dem ...
在vscode中创建vue项目
1. 背景昨天对一次成功用新电脑在vscode上跑成功项目工程里的vue项目,今天目标是自己用vscode新建一个vue项目关于vue环境配置请看这篇:使用vscode运行Vue项目 2. 准备工 ...

vscode怎么新建vue项目

vscode怎么新建vue项目相关推荐

最新文章

热门文章