vue项目搭建随记

工具介绍

• npm

            NPM的全称是Node Package Manager ，是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块(包)的标准。有了NPM，可以很快的找到特定服务要使用的包，进行下载、安装以及管理已经安装的包。

• vue-cli

            相当于脚手架，通过官方模板可以帮你自动生成模板工程

            安装：npm install -g vue-cli

            详见：http://webpackdoc.com/

• webpack

            Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

            安装：npm install webpack -g

            详见：http://webpackdoc.com/

项目搭建

• vue init webpack my-vue

            

            通过官方模板生成项目my-veu

• npm install

            安装依赖

• npm run dev

            启动项目，该命令会将项目编译到内存，并不会生成build文件

• npm run build           

            生成build文件

常用插件安装命令

•  element-ui ：基于 Vue 2.0 的组件库

            安装：npm i element-ui@next -save

             详见： http://element.eleme.io/#/

•   vue-router 2 ： vue路由插件 支持单页应用

              安装：npm install vue-router -save

               详见：http://router.vuejs.org/zh-cn/installation.html

•    vue-resource ： 与后端数据交互

               安装：npm install vue-resource -save

                详见：http://www.cnblogs.com/keepfool/p/5657065.html