使用VSCode创建第一个VUE项目

VSCode

Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux。

Vue

Vue.js 是目前最火的一个前端框架，它和Angular.js、React.js 一起，并成为前端三大主流框架。Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发），前端的主要工作，主要负责MVC中的V这一层，主要工作就是和界面打交道，来制作前端页面效果。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。

软件安装​

安装vscode

从官网https://code.visualstudio.com/Download直接下载，根据自己的电脑​操作系统选择不通的版本。​此文以Windows为例。

安装nodejs

此文默认你已经有nodejs环境

PS D:\biye\work\src> node -v
v14.8.0
PS D:\biye\work\src> 

安装插件

1. 点击左边的Extensions图标（快捷键Ctrl+Shift+X），输入vetur，找对对应版本然后点击install即可。
   

   Vetur.png

2. 按照同样方法查找ESLint插件，并安装。
   

   ESLint.png

3. 使用npm安装vue-cli：npm install -g vue-cli

4. 使用npm安装webpack：npm install -g webpack

使用脚手架创建vue项目

1. 选择菜单Terminal->New Terminal 打开一个新的命令行窗口（快捷键Ctrl+Shift+`)
2. 选择你想要创建新项目的目录，然后执行命令vue init webpack vuedemo，此过程会先进性一些配置，根据自己的情况进行配置

? Project name vuedemo
? Project description A Vue.js project
? Author fancyebai 
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm

3. 安装过程会持续一段时间，如果最后出现Project initialization finished!，则说明安装成功
4. 切换到项目目录cd vuedemo
5. 最后执行命令npm run dev
6. 其他命令，npm run build用户构建生产包，npm run start
7. 打开浏览器输入http://localhost:8080，如果出现vue的欢迎页面则说明成功
   
   index.png

最后推荐

推荐一个练手项目vueAdmin-template，github地址为https://github.com/PanJiaChen/vueAdmin-template#vueadmin-template，下篇文章再介绍