使用vue-cli（vue脚手架）及其他组件搭建一个Vue项目

使用vue-cli（vue脚手架）及其他组件搭建一个Vue项目

---

vue是对新手很友好的MVVM框架，具有组件化和数据驱动。组件化就是将一个整体合理拆分为一个一个小块（组件），组件可重复使用；数据驱动是前端的未来发展方向，释放了对DOM的操作，让DOM随着数据的变化自然而然的变化（尤神原话），不必过多的关注DOM，只需要将数据组织好即可。vue-cli提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。
那么现在我们就来学习一下vue-cli的搭建方式

一、准备工作

在使用vue-cli之前，请确认你的电脑已经安装了node，建议版本在 8.0.0 以上，下载地址

利用npm安装webpack ，打开命令行输入进行全局安装

npm install webpack -g

之后全局安装 vue-cli

npm install -g vue-cli

安装完成后，检验是否安装成功，输入 vue -V (注意：这里是大写的 “V”)，如果出现版本号，则说明安装成功。

二、构建vue-cli项目

新建一个文件夹作为项目存放地，使用命令创建模板，其中demo为项目名称

vue init webpack demo

等待一段时间模板下载完之后，会有一个交互式的选项让你选择

Project name demo # 项目名称，因为之前已经输入名字了，所以可以直接回车
 Project description A Vue.js project # 项目描述
Author # 作者名称
Vue build standalone # 这里按推荐选择运行加编译时
	Runtime + Compiler: recommended for most users
	Runtime-only: about 6KB lighter min+gzip, but templates (or any  Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere
 Install vue-router? Yes # 是否需要 vue-router，路由肯定要的
 Use ESLint to lint your code? Yes # 是否使用 ESLint 作为代码规范.
 Pick an ESLint preset Standard # 选择的ESlint 标准
 Set up unit tests Yes # 是否安装单元测试
 Pick a test runner 按需选择 # 测试模块
 Setup e2e tests with Nightwatch? 安装选择 # e2e 测试
 Should we run `npm install` for you after the project has been created? (recommended) npm # 包管理器

现在就新建好一个vue-cli项目了

三、项目结构

打开项目，结构如下

接下来介绍一下各个文件

bulid

里面是一些操作文件，使用npm run * 时其实执行的就是这里的文件。

config

配置文件，执行文件需要的配置信息。

src

资源文件，所有的组件以及所用的图片都是在这个文件夹下放着。简单看一下这个文件夹下都放了哪些东西。

assets

资源文件夹，放图片之类的资源，

components

组件文件夹，写的所有组件都放在这个文件夹下，

router

路由文件夹，这个决定了页面的跳转规则，

App.vue

应用组件，所有自己写的组件，都是在这个组件之上运行了。

main.js

webpack入口文件。

四、安装运行

在文件夹根目录下安装，输入命令

npm install

安装完成后使用npm run dev就可以运行在网站localhost上了