如何用vue-cli初始化一个vue项目

单文件组件和vue-loader

解析打包.vue文件

vue为了可以使咱们在项目开发中对组件进行更好的维护，提供了一个单文件组件系统，vue把每个独立的组件放在一个.vue的文件中，在这个文件中提供基础三个自定义标签：
1. template
2. script
3. style
来放置组件不一样的内容块，可是由于浏览器不可以直接去识别该文件类型，因此咱们须要经过webpack来进行编译打包，官方提供了一个对 .vue 进行处理的loader：vue-loader

ERROR in ./src/Hello.vue
Module build failed: Error: Cannot find module 'vue-template-compiler'

vue实际开发使用 .vue 的单组件系统来实现，可是不能适应实际复杂的需求，咱们还须要配置不少的一些东西来和 .vue 进行融合，这个配置很繁琐，因此官方提供了一个工具，帮助咱们来构建一个项目开发过程当中必须使用的一些内容，这个工具：vue-cli，经过这个工具咱们就能够很方便的来建立一个基于vue的项目，咱们也把这个工具称为---脚手架

安装

npm install vue-cli -g(全局)
或
yarn global add vue-cli

当咱们经过上述方式安装好vue的脚手架之后，咱们就能够在命令行中使用一个命令：vue（该命令是没有-cli的）

vue的使用

vue init

init：初始化（建立）基于vue的项目
：构建模板的名称：经常使用的是 webpack，其余的能够参考： https://github.com/vuejs-templates

：要构建的项目的名称

vue init webpack hello：基于webpack来构建一个名称为hello的vue项目（项目构建必定要联网！联网！联网！）

vue-cli是一个交互式命令行，经过vue命令构建项目会须要咱们填写一些项目的信息：
Project Name：要建立的项目名称（该命令会生产一个package.json文件，文件中的name选项就是这个ProjectName，默认为当前建立的项目目录名称，也能够自行制定（可是须要符合package.json中name命名规则，不要出现大写字母，空格，下划线，可使用 - ）

Project Description：项目简介，也会出如今package.json文件中,可选

Author：做者，可选

下一步直接回车

Install vue-router：是否安装vue路由组件，作项目的话必定要安装

Use ESLint to lint your code：是否须要使用ESLint模块进行代码检测

Setup unit tests with Karma + Mocha?：是否安装测试（单元测试）

Setup e2e tests with Nightwatch?：是否安装端到端的测试

完成上面步骤，over！

经过vue-cli完成配置之后，下一步须要安装vue所须要的依赖包，项目须要安装的依赖包在vue-cli工具自动生成的package.json文件中有说明：

dependencies：项目中实际须要使用到的依赖包
devDependencies：项目开发过程当中须要使用的一些工具包，不是项目实际线上代码的一部分

运行

所须要的安装依赖包安装完成之后，就能够启动项目，运行

yarn run dev / npm run dev：开启一个测试开发环境
yarn run build : 构建项目，把项目进行打包，咱们能够把项目打包后的文件上传到服务器

若是是首次运行，那么会看到一个欢迎页面，下面咱们就能够进行项目开发

项目结构

• build目录：构建项目命令所须要使用到的一些脚本文件和配置文件

• config目录：在vue-cli中会自动安装一个小型的express搭建的热重载web服务器，config里面就是关于这个服务器的相关配置

• dist目录：项目编译构建上线后的存放目录

• node_modules目录：项目依赖包存放目录

• src目录：项目源代码存放目录

• static目录：静态资源存放目录

在项目开发过程当中，咱们的大部分任务是在src这个目录下完成的

• main.js：vue脚手架为咱们自动生成的项目中设置的入口文件，在该入口文件中，作了一些项目初始化的工做
  • 引入 Vue
  • 引入必要的组件
  • 建立Vue实例

路由

当咱们的应用变得复杂了之后，涉及到的页面也会变多，逻辑也会变复杂，原来咱们是经过多页面的方式来组织和维护咱们的网站，可是这样的用户体验不是太好（由于会刷新或跳转页面），为了解决用户体验问题，最好的方式，数据（页面会发生变化），可是不须要跳转、刷新。

• 经过ajax异步无刷新获取数据
• 获取到数据之后经过vue来处理和管理还有渲染页面

什么状况下获取数据渲染页面？传统的处理方式：经过url从新发送请求获得新的数据和页面，获取什么页面数据由url来决定，使用了单页面开发模式的话，就不能再使用页面跳转，可是可使用url中的hash值的变化来决定获取什么内容渲染什么页面。

因此一个url的hash对应一个视图，那么咱们就须要设置hash和视图的关系，咱们能够把hash和view作一个对应关系（映射）
- 设置hash-view的map（映射）关系
- 监听hash变化
- 当hash值变化的时候，根据map找到对应的组件来渲染视图

vue为咱们提供了一个第三方的框架来实现上述的功能:vue-router

上面咱们提到的 地址-视图 的映射：路由

vue-router

https://router.vuejs.org

安装

npm install vue-router / yarn add vue-router