1.下载并安装Visual Studio Code

2.Visual Studio Code设置中文界面

1.打开Visual Studio Code，点击左侧扩展（Ctrl+Shift+X）文本框中输入“Language Packs”，选择需要的语言点击Install，如图所示

2.安装完成后，重启Visual Studio Code

3.创建项目

1.打开菜单栏中的文件->打开文件夹，打开某个vue项目的空白目录

2.在资源管理器空白处右键选择“在集成终端中打开”，如图所示

3.在集成终端中输入npm install vue -g ，如图所示

4.在集成终端中输入npm install vue-cli -g，如图所示

5.在集成终端输入npm install webpack -g，如图所示

6.在集成终端输入vue init webpack my_study_vue_project，如图所示

7.在集成终端输入cd .\my_study_vue_project\，进入到创建的项目目录下。然后输入npm install，如图所示

8.项目创建成功后的目录结构如图所示

4.运行项目

1.在集成终端输入npm run dev，如图所示

2.在浏览器中输入地址，可访问创建的Vue项目

使用Visual Studio Code工具创建Vue项目并运行相关推荐

在Visual Studio 2010中创建多项目（解决方案）模板【三】
前文回顾: 在Visual Studio 2010中创建多项目(解决方案)模板[一]:多项目解决方案模板的创建在Visual Studio 2010中创建多项目(解决方案)模板[二]:Templat ...
在 Visual Studio Code 中使用 Vue
Vue.js是一个流行的 JavaScript 库,用于构建 Web 应用程序用户界面,Visual Studio Code 内置了对HTML.CSS和JavaScript的 Vue.js 构建块的支 ...
微信开发者工具创建vue项目步骤
在我开始学习vue的时候,对于新手安装这个环境是真的搞人心态,不友好.在不断的安装,找教程,又帮同学配置了下,有必要自己总结下.对于新手搭建vue环境,就一步步来就ok了. 在用 Vue 构建大型应用 ...
在Visual Studio 2010中创建多项目（解决方案）模板之关键步骤【四】
第一步. 在文件夹 ERPTemplate 下面分别创建各个项目模板所对应的文件夹第二步. 将Properties 文件夹下的AssemblyInfo.cs 和所有 *.cs 文件右击属性编译方式( ...
visual studio 2010教程-创建网站项目
1.打开visual studio 2010 选择新建 - 网站 2.进行对应的设置 3.创建完毕之后,在解决方案资源管理器中出现对应的项目 4.在项目名称上右键 - 添加新项 5.选择web窗体, ...
Visual Studio 2017-2019版本创建C#项目时没有创建网站这一选项？
目录 1.在创建新项目的面板滑倒最下面,---> 安装多个人工具和功能 2.这时已经打开了你安装Vs时候的面板 ,---> ASP.NE和Web开发选项 3.下滑找到 --->其他项 ...
使用vue-cli脚手架工具创建vue项目
vue-cli 脚手架安装: 1) 确保node环境:安装vue-cli需要在node环境下安装,所以首先确保自己安装了node,检查自己电脑是否安装了node ,可以在命令行工具内执行: node ...
Visual Studio Code PlatformIo IDE 新建项目下载慢的解决办法
PS:当前方法基本已失效了至于原因,大家可以看看官方说明: How to download packages manually? Chinese mirror of the package regi ...
超详细Visual Studio Code配置PHP开发环境 / 如何运行HTML,PHP文件
文章目录 (一)VSCode如何新建一个HTML文件并在网页打开? (二)VSCode配置PHP开发环境 (一)VSCode如何新建一个HTML文件并在网页打开? 原文链接:vscode如何运行htm ...

使用Visual Studio Code工具创建Vue项目并运行

1.下载并安装Visual Studio Code

2.Visual Studio Code设置中文界面

3.创建项目

4.运行项目

使用Visual Studio Code工具创建Vue项目并运行相关推荐

最新文章

热门文章