VUE学习之脚手架（vue-cli）

简单介绍下VUE

1. Vue (读音 /vjuː/，相似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不一样的是，Vue 被设计为能够自底向上逐层应用。Vue 的核心库只关注视图层，不只易于上手，还便于与第三方库或既有项目整合。另外一方面，当与现代化的工具链以及各类支持类库结合使用时，Vue 也彻底可以为复杂的单页应用提供驱动。—— 官方
2. Vue是MVVM结构的，即model-view-viewmodel：数据影响试图，一样视图也能够影响数据

了解vue-cli

1. 官方如是说：Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。CLI 工具假定用户对 Node.js 和相关构建工具备必定程度的了解。
2. 注意：假如你是新手，咱们强烈建议先在不用构建工具的状况下通读指南，在熟悉 Vue 自己以后再使用 CLI。

如今就假设已经不是新手，来搭建脚手架吧！

安装node.js

从node官网下载最新的node.js

这里有两个版本：LTS和Current，通常咱们会选择LTS版本

LTS：长期支持版，成熟可靠

Current：稳定版，最新特性

而后点击安装node.js，安装完成以后查看安装的版本号，在命令窗口输入

$ node -v 
复制代码

咱们须要用到的npm（node package manager）是集成在node中的，查看npm的版本信息能够在命令窗口输入

$ npm -v 
复制代码

安装淘宝镜像

由于npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，因此淘宝团队推出了淘宝镜像cnpm代替官方版本

安装cnpm：在命令窗口输入

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
复制代码

而后等待安装完成，查看cnpm的版本信息能够在命令窗口输入

$ cnpm -v
复制代码

成功安装cnpm以后，只要是用npm命令的时候改成cnpm便可

安装VUE

官方：在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

只要在命令窗口输入安装命令便可

$ cnpm install vue
复制代码

查看安装版本信息

$ vue -V
或
$ vue --version
复制代码

安装vue-cli

全局安装

$ cnpm install --global vue-cli
复制代码

建立webpack项目

首先咱们要选定好目录，而后在命令行中把目录转到选定的目录，初始化项目

# my-project为项目名称，能够自定义
$ vue init webpack my-project
复制代码

初始化时会有一些选项，按照本身的项目选择便可

Project name (my-project) #项目名称

Project description (A Vue.js project) #项目描述一个Vue.js 项目

Author (zuozhe) #做者

Vue build

Vue build (standalone)

Install vue-router? (Y/n) #是否安装Vue路由，也就是之后是spa（但页面应用须要的模块）

Use ESLint to lint your code? (Y/n) #使用 ESLint 到你的代码？ （Y [ yes ] / N [ no ]）

Pick an ESLint preset (Use arrow keys) #选择一个预置ESLint（使用箭头键）

Setup unit tests (Y/n) #设置单元测？ （Y/ N）

Pick a test runner

Setup e2e tests with Nightwatch? (Y/n) #设置端到端测试，Nightwatch？ （Y/ N）

Should we run "npm install" for you after the project has been created? #建立项目以后咱们是否能够经过“npm install”来运行

安装项目依赖

进入项目

$ cd my-project
复制代码

安装依赖

$ npm install
复制代码

启动项目

$ npm run dev
复制代码

如上图表示启动成功，在浏览器的地址栏输入图上地址 http://localhost:8088，显示以下页面即表示配置成功，项目能够进行开发了