Vue.js开发实践(1)-脚手架的安装及使用
文章目录
更多关于Vue.js的系列文章请点击：Vue.js开发实践(0)-目录页
Vue.js是一款由国人开发的流行前端js框架，为了更快速地开发，我们需要安装一些开发环境和脚手架。
一、VUE脚手架介绍
Vue 提供了一个官方的 CLI，为单页面应用快速搭建 (SPA) 繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。更多详情可查阅 Vue CLI 的文档。
简单地说，Vue脚手架能够快速为我们搭建开发环境。
使用脚手架的好处：
-
脚手架是通过webpack搭建的开发环境
-
使用ES6语法，在低版本的浏览器中会转换为ES5去兼容
-
打包和压缩js为一个文件
-
项目文件在环境中编译而不是在浏览器中，这样的话访问速度更快
-
实现页面自动刷新，即修改实时生效
二、VUE脚手架的安装
2.1、安装node.js
从node官网下载并安装node：node.js下载
安装完成后，打开命令行工具输入命令node -v，如下图，如果出现对应版本号，就说明安装成功了。
2.2、安装cnpm
cnpm是淘宝NPM镜像，一个用于下载依赖的工具。
直接在命令行中输入
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
等待安装完成后，输入cnpm -v则可查看其是否安装成功
2.3、安装vue
在用 vue.js 构建大型应用时推荐使用 npm 安装，npm 能很好地和诸如 webpack 或 browserify 模块打包器配合使用。vue.js 也提供配套工具来开发单文件组件。
在命令行中使用cnpm安装vue
cnpm install vue
通过vue -V查看是否安装成功：
2.4、安装vue-cli脚手架构建工具
vue-cli 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：
在命令行中输入：
$ cnpm install --global vue-cli
三、创建基于webpack模板的项目
3.1、创建过程
要创建项目，首先我们要选定目录，然后再命令行中把目录转到选定的目录。可以使用：
$ vue init webpack my-project
my-project为自定义项目名
运行初始化命令的时候回让用户输入几个基本的选项，如项目名称，描述，作者等信息，如果不想填直接回车默认就好。
需要注意的是项目的名称不能大写，不然会报错。
进入初始化好的项目当中，下载项目所需的依赖：
$ cnpm install
下载好依赖后，在项目中使用cnpm运行项目，默认打开的是localhost:8080端口运行项目
$ cnpm run dev
3.2、项目结构
3.3、src文件
-
asset:存放图片字体
-
component：存放组件的文件夹
-
App.vue：根组件
-
main.js：最重要的一个文件，在里面导入了VUE和根组件App.vue