Vue+webpack学习案例(一)-构建Vue项目

一、Vue简介

        Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

      Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。

二、构建Vue+webpack应用

         Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目，

         首先下载安装nodejs,   nodejs官网下载。

         根据以下命令创建项目：   cmd进入命令行 

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

           这里有个地方需要说明下：vue init webpack 你的项目名  ，这个命令执行后，到选择Vue build方式时，有两种方式，第一种为standalone方式，第二种runtime-only为runtime方式。

runtime 打包的是 /node_modules/vue/dist/vue.common.js
standalone 打包的是 /node_modules/vue/dist/vue.js 
runtime 和 standalone 这两种方式对普通用户使用起来没区别，多数人都是在*.vue里写，所以用runtime就够了。

这里选择runtime-only

三、运行项目

       根据以上命令成功执行后，执行最后一步 npm run dev

       

然后浏览器地址http://localhost:8080/ 打开可以看到主页了，这时候就修改和添加自己的界面了

        

 

到这里就要选一套ui了，目前vue搭配vux还是不错的选择，不过这里是默认vue2.0构建的项目，截至目前为止vux并不支持vue2.0,

下一篇将开启 vux构建开源中国微信版应用

构建开源中国微信版-开篇