VUE学习01--如何使用VSCode搭建一个可以运行的VUE项目

初学前端，将自己学习路上的一点经验总结一下，供大家参考，欢迎大家多提建议~共同进步~

首先大概介绍一下VUE框架。

VUE是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

由于VUE框架具有简单、灵活、高效的特点，目前在国内的中小企业中使用广泛。

下面我们来说一下如何使用VSCode搭建一个VUE项目。

1.首先我们需要安装VSCode。安装过程不做介绍。给大家贴一个安装教程自行学习。

   VSCode安装教程

2.安装所需环境nodeJs。同样贴一个安装教程。

   NodeJs安装教程

3.打开VScode，点击Terminal-new Terminal  执行安装脚手架命令。（注：这里的Terminal其实就跟你打开的cmd命令行一样，只不过内嵌在VSCode中方便你与操作系统交互）

执行命令 npm install --global vue-cli

4.进入到你选择好的VUE工作目录，执行创建项目命令，并按照下面提示操作。

命令：vue init webpack vuedemo05 (项目名)  --创建一个基于webpack 模板的新项目

按照我这里的提示输入即可，Enter表示回车
Project name vuedemo01 --Enter
Project description A Vue.js project  --Enter
Author  --Enter
Vue build standalone --Enter
Install vue-router? --Yes
Use ESLint to lint your code? --No
Set up unit tests --Yes
Pick a test runner jest --Enter
Setup e2e tests with Nightwatch? --Yes

创建完成后如下：

如界面中所示，项目已经创建完成，并且提示我们 先cd到项目目录，再执行 npm run dev 来运行项目。我们来试一下。

5.启动项目。

执行命令：

cd vuedemo05
npm run dev

 执行结果如上图，我们可以在浏览器中打开 http://localhost:8080 来看一下效果。

到这里我们就大功告成了，一个简单的VUE项目就创建运行完成~

 

 

喜欢的朋友记得留下一个赞哦~~