vscode使用vue搭建项目

配置

软件

• vs code 下载地址
• Node.js 下载地址（建议下载左边的稳定版本）
  
  .msi文件下载完成后双击安装
  
  打开cmd输入node -v和npm -v检查版本是否一致
• vue-cli安装

  • 为了更好的使用vue开发，首先需要安装vue-cli，如果事先安装了vue cli1.x或者vue cli2.x，要先卸载掉（没有跳过此步），cmd中输入：

    npm uninstall vue-cli -g

  • 接下来，cmd中输入：

    npm install @vue/cli -g

    安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。当然，你还可以用下面这个命令来检查其版本是否正确

    vue –version

中文设置

先使用快捷键【Ctrl+Shift+P】，
在弹出的搜索框中输入【configure language】，
然后选择搜索出来的【Configure Display Language】，

选择【install additional languages】，

安装插件名为【Chinese （Simplified）Language Pack for Visual Studio Code】，重启VSCode软件生效。

tab键的缩进控制

改为默认两格，四格正常应用会出问题

vs code插件的选择

• 文件图标： vscode-icons
  安装地址

• 检查工具： ESLint
  安装地址

• 调试工具： Debugger for Chrome
  安装地址

• 代码格式化： Prettier
  安装地址

搭建vue项目

1. 打开vs code终端（快捷键Ctrl + ` ）点击终端——新建终端，

2. 安装webpack(js的打包工具)，输入以下命令：

   npm install -g webpack

3. 安装完成后开始创建vue项目，首先创建一个文件夹用来存放你的项目，用vscode打开对应的文件夹，并在终端cd到对应的文件

   vue init webpack vuefilename（其中vuefilename就是你的项目名字，按你喜欢的来）

4.加载完成后会出现配置项
可以自定义或按回车确定

接着就是安装依赖（node_modules文件夹下）

5.完成后你可以看到这样的项目结构：
其中基本只需要更改src部分，main.js是入口

6.运行项目，依然是cd到项目文件，输入

npm run dev

看到下面的页面就是成功了