最近的前端VUE以及React可以说是大火了,基本上每个群的讨论都离不这两个话题,本身自己是做后台出身的,对前端的追求大概就在能看的水平线了,这次也跟一次风一起看看VUE这个东西到底是什么吧。
构建
Vue官网
Vue中文社区
工欲善其事必先利其器,这两个网站就是我们的学习手册了。
关于Vue的构建方式的话分为两种,一种是直接在页面上通过js
的引用比如下面这种
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
上面两种引用任选一个即可
以及使用vue-cli
脚手架的方式构建,关于这个的教程比较多,在这里我就不详述了,简单的罗列一下步骤。
- 由于
vue
是依赖于node.js
所以先去把node.js
安装好 - 在
nodejs
的官网上下载好安装包一路next
即可,注意现在npm
是直接包含在内的,如果看到之前的教程还需要去装npm
的话,省略这步即可 - 如果没有梯子的话可能会发现下载的时候特别慢,建议大家先换到国内镜像https://npm.taobao.org
使用如下命令npm install -g cnpm --registry=https://registry.npm.taobao.org
- 接下来安装
vue-cli
脚手架
cnpm install -g vue-cli
- 安装完毕后可以开始构建我们的项目了比如我们现在进入到F盘
vue init webpack 项目名
接下来的话会出现一些组件的安装
image.png
不出意外的话,我们的项目已经构建完毕了。 - 执行
npm vue dev
运行我们的项目,访问http://localhost:8080则会出现以下界面
image.png
能看到如上界面就代表我们的vue项目已经构建完毕啦