如何用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的项目

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