使用VScode创建Vue项目

已于 2022-11-02 20:21:59 修改
阅读量1.4k 收藏 13
点赞数 2
文章标签： vue.js vscode javascript
于 2022-11-02 19:52:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56109504/article/details/127657416
版权

1、创建文件
创建文件夹用vscode打开，点击终端按钮，cd进入到你要创建的文件夹里
输入命令
vue create vue01
在这里插入图片描述
2、选择配置信息

  • 通过上下方向键选择，然后回车确定

  • 选择Manually select features 自定义配置
    在这里插入图片描述

  • 自后按空格选择要安装的资源配置，带*说明选中了（注意不要按回车键）
    在这里插入图片描述

3、选择版本
我一般选择Babel、Route、Vuex、CSS Pre-processors…选好直接按回车

4、路径选择

  • 是否使用history router？自己需求
    在这里插入图片描述

5、请选择Css预处理语言，选择Less
在这里插入图片描述

  • 主要是为css解决浏览器兼容，简化css代码等问题

6、如何存放配置选择in package.js
在这里插入图片描述

  • 我都会通一集成在package.json文件
    7、是否保存本地配置，自己选择。
    8、搭建完成
    在这里插入图片描述

  • 在浏览器中访问：http://localhost:8080/

在这里插入图片描述

到这里vue项目就搭建完成啦！码字不易，点点赞！

Charles*
关注
  • 2
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vscode新建一个最简单的vue项目
09-27
接下来，我们将分步介绍创建Vue项目的步骤。 **一、安装必要工具** 首先，确保你已经安装了Node.js，因为Vue项目依赖于npm或yarn来管理依赖。同时，下载并安装Visual Studio Code。在VSCode中，我们需要安装以下两...
VSCode搭建Vue Element Admin的项目环境
04-11
### VSCode搭建Vue Element Admin的项目环境 #### 版本说明 - **Node**: v18.20.2 - **NPM**: 10.5.0 - **Git**: 2.19.1 - **Vue Element Admin**: [官网链接]...
使用VSCode快速创建一个Vue项目
weixin_59230783的博客
03-28 3560
简简单单使用VSCode创建一个Vue项目
在VS Code上搭建Vue项目教程（Vue-cli 脚手架）
最新发布
明静致远
07-12 2940
搭建Vue项目使用的是Vue-cli 脚手架。前期环境需要准备就像Java开发要依赖JDK环境一样。
使用VSCode创建一个Vue项目
Ethereal的博客
07-12 6122
详细介绍如何创建一个Vue项目，node.js，vue-cli安装，配置淘宝镜像等。
vsCode创建一个vue项目
MC_666的博客
02-11 854
vsCode创建一个vue项目
VSCode搭建Vue项目的方法
10-15
2. 创建Vue项目 - 创建一个项目文件夹，如myvue。 - 使用vue init webpack命令，按照项目名称和配置选项初始化项目。 - 等待依赖项安装完成。 3. 项目结构介绍 创建好的Vue项目结构包含了许多模板文件和配置...
vscode 开发Vue项目的方法步骤
12-09
下面将详细介绍如何使用VSCode配置和优化开发环境，以及如何进行Vue项目的断点调试。 首先，你需要下载并安装VSCode。你可以从官方市场Place（https://marketplace.visualstudio.com/VSCode）或直接访问本地地址...
使用vs code搭建vue项目1
09-04
首次使用vs code来搭建的vue项目，欢迎大家来查看指正。
vscode创建vue项目
qq_44920229的博客
06-21 4178
VSCode创建Vue项目教学
2020-11-20
u014620304的博客
11-20 911
VSCode搭建Vue项目 在vscode上搭建一个vue项目—初学总结。 1.假设Vscode、nodejs等已经安装好了。 2.全局安装vue-cli，vue-cli可以帮助我们快速构建Vue项目。 安装命令： npm install -g vue-cli 打开VScode的终端，调出命令输入框。点击终端-新建终端，输入上述命令，回车，等待安装完成。 3.安装webpack，它是打包js的工具 安装命令： npm install -g webpack 安装方法同上。 4.安装完成之后就可以开始创建vu
在vscode中创建vue项目
热门推荐
someday____的博客
09-01 1万+
昨天对一次成功用新电脑在vscode上跑成功项目工程里的vue项目，今天目标是自己用vscode新建一个vue项目。第三步：在下面步骤中，一些需要填写或选择的选项，我都直接Enter了，一些需要安装的我都直接No了。第一步：打开vscode, 选择 文件 >> 打开文件夹 选择要创建项目的文件目录。第五步：在浏览器输入http://localhost:8080就可以打开项目了。，其中projectName可以自行修改。第四步：按照上图提示进入到项目目录并运行项目。...
VSCode创建Vue项目
qq_44664361的博客
03-11 1161
同样也是在vscode终端，输入vue init webpack ZJJJi，意思是初始化一个项目，其中webpack是构建工具，也就是整个项目是基于webpack的，ZJJJi 是整个项目文件夹的名称，大家可自行更改。(2) 根据提示，访问http://localhost:8080，会访问到如下界面。（3）查看node.js是否安装成功：打开cmd，输入ndoe -v 和 npm -v 如果显示版本信息，则说明安装成功。下载node.js，按照步骤安装即可，node.js安装完成之后会同步安装npm。
使用VSCode创建新的Vue项目
cxhgg的博客
09-09 790
1、在终端窗口输入vue ui打开vue可视化项目管理器 2、创建新项目 3、手动配置项目 4、选择常用功能 5、选择配置 6、创建项目 7、创建的项目可能没有.eslintrc.js文件 从其他项目复制一个过来 自己新建一个，百度找一个配置好的复制过来在修改 8、修改package.json文件 "scripts": { "serve": "vue-cli-service serve", ...
VS code上创建Vue项目详细化教程2-配置并创建Vue项目
Charles_Clark的博客
06-06 1949
VS code上创建Vue项目详细化教程2-配置并创建Vue项目
使用vscode快速搭建Vue项目步骤
m0_68218656的博客
01-15 1万+
①Win+R指令，打开命令框输入cmd②检查nvm是否安装成功(安装成功会显示对应的版本）nvm -v。
使用vscode创建vue项目
08-25
使用VS Code创建Vue项目的步骤如下： 1. 首先，确保你已经安装了VS Code编辑器。如果还没有安装，你可以从官方网站下载并安装它。 2. 接下来，你需要安装Node.js。可以从官方网站下载Node.js安装程序，并按照安装指南进行安装。 3. 安装完成后，打开VS Code编辑器。在扩展面板中搜索并安装"Vue.js Extension Pack"扩展。这个扩展包中包含了常用的Vue开发工具和插件，可以帮助你更方便地进行Vue项目开发。 4. 在VS Code中打开一个新的终端窗口，使用以下命令安装Vue脚手架vue-cli： ``` npm install -g @vue/cli ``` 5. 安装完成后，使用以下命令创建一个新的Vue项目： ``` vue create your-project-name ``` 这个命令将会提示你选择一些配置选项，例如预设模板、安装插件等。根据自己的需求进行选择，或者直接按回车键选择默认选项。 6. 等待项目创建完成后，进入项目目录： ``` cd your-project-name ``` 7. 最后，使用以下命令启动Vue项目： ``` npm run serve ``` 这个命令将会启动一个本地开发服务器，你可以在浏览器中通过访问http://localhost:8080来查看你的Vue项目。 综上所述，使用VS Code创建Vue项目的步骤包括配置环境、安装依赖和启动项目。通过这些步骤，你就可以开始在VS Code中进行Vue项目的开发了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [VSCode创建Vue项目完整教程](https://blog.csdn.net/embelfe_segge/article/details/126080377)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [vscode创建vue教程](https://blog.csdn.net/y_dzaichirou/article/details/102634539)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值