如何快速上手用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

vscode怎么创一个javascript 如何用vscode建一个新项目_node.js

2.2 常用插件推荐(并不完全)

vscode怎么创一个javascript 如何用vscode建一个新项目_Vue_02

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。然后在桌面上打开文件夹,

vscode怎么创一个javascript 如何用vscode建一个新项目_vue.js_03


输入cmd 打开命令窗口,

再输入创建项目命令,输入回车,

vue init webpack firstvue

接着会出现一些配置项,可以根据需要配置,也可以默认,直接按回车

如下图:

vscode怎么创一个javascript 如何用vscode建一个新项目_Code_04

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

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

vscode怎么创一个javascript 如何用vscode建一个新项目_Vue_05


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

npm run dev

3.项目打包发布上线

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