初学前端,将自己学习路上的一点经验总结一下,供大家参考,欢迎大家多提建议~共同进步~
首先大概介绍一下VUE框架。
VUE是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
由于VUE框架具有简单、灵活、高效的特点,目前在国内的中小企业中使用广泛。
下面我们来说一下如何使用VSCode搭建一个VUE项目。
1.首先我们需要安装VSCode。安装过程不做介绍。给大家贴一个安装教程自行学习。
2.安装所需环境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项目就创建运行完成~
喜欢的朋友记得留下一个赞哦~~