如何快速上手用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文件夹,里面就是打包之后的内容,直接部署就好了