如何快速上手用VSCode新建一个Vue项目-----初体验

如何快速上手用VSCode新建一个Vue项目-----初体验

1、基本概念

1.1 VSCode

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

1.2 Vue.js

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

2.安装的相关细节

2.1 VSC的下载

去官网下载就ok了
https://code.visualstudio.com/ 然后点击download

2.2 常用插件推荐（并不完全）

2.3 安装Node.js

检验是否安装成功，可以输入 node -v 显示版本号就说明成功了

2.4 全局安装vue-cli(脚手架)

vue-cli 可以帮助我们快速构建Vue 项目
安装命令：
npm install -g vue-cli
检验是否安装成功，可以输入 vue -v 显示版本号就说明成功了

2.5 安装webpack

它是打包js的工具
安装命令：
npm install -g webpack

2.6 以上安装完毕后

就可以开始创建vue项目，首先创建一个文件夹用来存放你的项目，用VSC 打开对应的文件夹，比如就取个firstvue。然后在桌面上打开文件夹，

输入cmd 打开命令窗口，
再输入创建项目命令，输入回车，
vue init webpack firstvue
接着会出现一些配置项，可以根据需要配置，也可以默认，直接按回车
如下图：

耐心等待，等一个基本的vue项目搭建。

完成之后可以在VSC左边看到如下目录，其中main.js就是入口

接着运行项目，先cd firstvue进入文件夹，然后输入以下指令
npm run dev

3.项目打包发布上线

输入命令：
npm run build
完成后，项目文件夹中会出现一个dist文件夹，里面就是打包之后的内容，直接部署就好了