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

目录

1.下载并安装Visual Studio Code

2.Visual Studio Code设置中文界面

3.创建项目

4.运行项目 

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项目