vuejs 起步入门篇 2016最火的前端框架

安装

最近在研究 vuejs 准备使用 vuejs yii2.0 做 api 来把博客弄成手机应用，之前我正在弄使用 hbuilder 来进行构建的一个安卓移动端的混合应用，也就是博客的安卓版，打包成 apk，届时我会放出下载链接欢迎大家下载安装。 今天来讲讲 vuejs 的安装，这里的安装的话大概有两种，第一种是官方推荐的使用 vue-cli 这个工具进行初始化构建 vue 项目，但是这个工具是对于那些熟悉 webpack 和 gulp 的开发者而言，对于普通小白可能看不懂 cli 生成的目录结构。否则我强烈建议小白用户一步一步按照官方的教程进行安装。 今天我们来讲一下使用 cli 进行安装 Vue.js 提供一个官方命令行工具，（vuejs-cli）可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

就这么简单一个 vue 项目就安装完成了。 这里来说一下这个目录结构 src 是源文件目录 比如你的 js css 都放在里面 test 目录是进行测试的目录 .babelrc 这个是 babel 配置目录 可以配置使用的 es2015 的版本以及指定 stage 的级别 package.json 是 npm 包配置文件 这里可以配置包依赖以及配置 npm run 的脚本 static 是静态资源目录 图片 这些放在里面 node_modules 这个是 npm 模块目录 当然这里面也可以放你自己写的模块 需要在 package.json 文件中指定入口 js 文件的地址。

小结

这只是官方提供的一种非常简单的 vuejs 的安装方法，非常傻瓜式的，但是如果是小白用户，那么这个门槛可能有点儿高了。需要我们自己使用 webpack 配置简单的 vuejs 环境目录结构 可能是下面这种 这种安装和配置方法请大家上网搜索就行了，这里就不细讲了。好了今天就到这里。后面会写关于 vuejs 组件 父子组件通信 组件之间通信 vuejs 插件等相关文章欢迎大家届时关注。