Vue系列之初体验（一）

前言

      伴随大前端时代的到来，越来越多的前端框架接踵而至。对于一些刚刚接触前端的小伙伴们，可能不太了解什么是框架。个人的理解是框架可以为前端开发者提供一整套技能，通过规定好的代码结构做编排，开发者只需要按部就班的编写与业务相关的代码即可。同时框架还为我们提供了一些优化、技能更强大的隐形接口，使你在升级打怪的路上一路畅通无阻。讲到这里是不是觉得开发web产品就很有必要用上框架啦。

正文

      今天就来介绍一下当前最火的主流前端框架之一的vue。什么是vue ? vue是一套构建用户界面的渐进式框架，上手及其简单，可谓是五分钟包教包会。其中心思想是数据驱动。作为一个合格的前端开发，你肯定知道前端页面无非就是dom + data的组合。相较于以前的jquery，vue以数据为主心骨，通过数据的增删改来动态的改变dom的结构。
      接下来我们来说下如何搭建一个简单的vue项目。
------------------------------------------------ 敲黑板------------------------------------------------------
Step 0：知识储备
在学会vue之前，你得至少了解HTML、CSS、JavaScript。毕竟在升级打怪的路上，还是需要走新手教程的，没有前端基础的小宝贝们还是先补补基础知识再来哈~

Step 1：安装node环境
Vue是需要依赖nodejs，所以第一步确保你的电脑里有node环境。如无，请动动你们的小手，打开node官网https://nodejs.org/en/download/ 并点击下载、安装。然后打开cmd， 输入node –v，查看版本号。若出现版本号，恭喜你，已经成功安装啦~

Step 2：安装vue
本宝宝推荐npm方法安装，不要问我为什么，我就这么懒 。执行命令：

npm install vue

Step 3：搭建脚手架
拿起你们的键盘跟我舞动起来：

# 搭建脚手架
npm install –g vue-cli
# 初始化
vue init webpack my-project
# 此处会有一些配置，对于初学者，可以一路回车
... ... 
# 进入到目录下
cd my-project
# 安装依赖包
npm install
# 运行文件
npm run dev

到此，当你成功执行上述命令后，打开浏览器访问localhost:8080，界面上会出现如下图所示的美景

 

 

恭喜你，已经成功搭建了一个vue的项目

接下来，我们来看一下这些命令都生成了什么。打开项目目录。如下图：

 

1. build：包含了webpack构建项目的相关代码；

2. config：项目的基本配置信息；

3. dist：生产环境下的产物；

4. node_modules：项目依赖模块；

5. static：静态资源，例如图片、字体、音视频等；

6. index.html：首页的入口文件；

7. src：开发者的主要开发目录；
   其中：

   • assets：存放一些项目中用到的图片、文件等；

   • components：项目组件，一般存放项目里的公用组件等；

   • App.vue：vue文件的核心文件；

   • main.js：项目的入口文件。

   • package.json：配置文件；

   • README：项目说明文档

      

       以上就是今天对vue项目初阶的基础讲解，不知道各位小宝贝有没有对vue有个大致的了解呢。拿起键盘跟我一起，这个姿势才与vue更配哦~

 

                                                            觉得本文对你有帮助？请分享给更多人

                                                   关注「前端怪咖」，加入我们，一起提升前端技能