---

前言

在我们学了HTML、CSS、JavaScript（JQuery）之后，我们都会使用它们去写一些网站网页，而使用JavaScript原生去开发是一件比较痛苦的事情。因此开发框架就是我们在掌握了基础语言的基础上可以进一步去学习的知识，Vue框架就一个比较好的前端开发框架。

---

一、Vue.js是什么？

• 是一套用于构建交互式用户界面的渐进式框架
• 提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API
• 有简洁、数据驱动、组件化、轻量、快速、模块友好等特点

Vue.js的能力和语法在这里就不展开说，可以进官网或菜鸟教程学习

Vue.js 安装
独立版本：
Vue.js 官网下载地址：http://vuejs.org/guide/installation.html

NPM 安装：

# 最新稳定版本
$ npm install vue
# 最新稳定 CSP 兼容版本
$ npm install vue@csp
# 开发版本（直接从 GitHub 安装）
$ npm install vuejs/vue#dev

安装好后呢？
这些是需要我们在项目引入下载好的Vue.js，然后按照Vue.js的要求把项目手动修改或配置成Vue框架的项目，这个过程很麻烦，特别对于没接触过框架的同学来说。为了解决这个问题，我们可以使用Vue CLI（脚手架工具）来直接创建Vue项目。

二、Vue CLI

1.官方介绍

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

• 通过 @vue/cli 实现的交互式的项目脚手架
• 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发
• 一个运行时依赖 (@vue/cli-service)，该依赖：
  • 可升级；
  • 基于 webpack 构建，并带有合理的默认配置；
  • 可以通过项目内的配置文件进行配置；
  • 可以通过插件进行扩展。
• 一个丰富的官方插件集合，集成了前端生态中最好的工具。
• 一套完全图形化的创建和管理 Vue.js 项目的用户界面

2.安装

注意：电脑需要安装好了Node.js，本文以Vue CLI 3为例，Vue CLI 4.x 需要 Node.js v8.9 或更高版本

可以使用下列任一命令安装这个新的包：

npm install -g @vue/cli
# OR
yarn global add @vue/cli  //需要有yarn

安装后，查看vue的版本号，来验证它是否安装成功：

vue --version

升级 Vue CLI 包的版本：

npm update -g @vue/cli
# 或者
yarn global upgrade --latest @vue/cli

三、创建一个项目

安装后Vue CLI脚手架工具后，可以使用两种方式去快速创建一个Vue项目，一种是命令创建，另一种是图形化界面创建。

1.使用命令式创建

vue create
运行以下命令来创建一个新项目：

vue create demo //demo是项目名

你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。这里我们先选择手动设置：

关于配置选项的说明：

• Babel：帮助我们解析es6代码，对于一些低版本浏览器不能识别es6代码，该插件将es6代码适配成低版本浏览器能够识别的代码
• TypeScript：TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准
• Progressive Web App (PWA) Support：渐进式Web应用，专门应对手机web开发。当我们在手机上使用Web应用时接近原生App效果
• Router：官方路由插件，使构建单页面应用程序更方便
• Vuex：状态管理组件
• CSS Pre-processors：CSS预编译器
• Linter / Formatter：代码规范标准
• Unit Testing：单元测试
• E2E Testing：end to end(端到端)测试

这里我们暂时把Linter / Formatter不选，去掉，选了之后ES的语法规范可能会让刚开始学的人感到崩溃。

选择好后，回车，接着选择配置文件的类型，选package.json，回车：

接着后询问我们要不要把刚刚的设置保存，供以后直接用。这里我们先选n，不保存：

回车后，就开始创建一个vue项目：

项目创建好后，我们可以进入到项目并让它运行起来

cd demo //进入到项目demo中
npm run serve // 启动项目，注意vue-cli2的启动命令是npm run dev

启动项目后，会得到两个地址，线上和本地的：

在浏览器打开即可看到初始的vue项目的效果：

2.使用图形化界面创建

我们也可以通过 vue ui 命令以图形化界面创建和管理项目：

vue ui

上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程



这里就不一一演示项目创建了，流程和命令式的差不多，区别在于这里是可视化操作，对一些人来说更喜欢，觉得简单。但是界面化创建不同稳定，有比较明显的卡顿现象，因此创建项目也没有命令式的快捷。

---

四、项目目录结构说明

创建一个vue项目后，我们需要知道项目内部的目录和文件的功能作用，这样我们才知道如何去编写代码，让项目呈现我们想要的效果。

1.目录结构：

• node_modules：npm命令下载的依赖包
• public：静态资源目录, 相当于vue-cli2.x中的static,
  public目录下的文件会直接复制到最终的打包目录（默认是dist/）。必须使用绝对路径引用这些文件
• src：源码目录
  • assets：项目中用到的资源文件，css，js、images等
  • components：公共组件，比如header.vue、footer.vue，图中HelloWorld.vue就是一个组件
  • App.vue：默认入口组件
  • main.js：vue-cli工程入口文件
• package.json：项目基本信息，依赖信息
• babel.config.js：Babel插件配置信息
• package-lock.json：锁定安装时的包的版本号，并且需要上传到git，以保证其他人在npm install时大家的依赖能保证一致。
• .gitignore：用于忽略git版本控制的文件和目录

另外一般还会有：

• router：页面路由
• views：页面级组件，通常是路由中指向的页面放置到此处，下面可以按模块分子文件夹

2.vue文件结构：

App.vue

<template> 
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

一个vue文件一般包含三个模块，<template> 、<script>、<style>，分别对应页面的HTML代码、JS代码、CSS代码

3.打包项目

打包命令：

npm run build

默认在项目根目录下生成一个dist文件夹，里面就是项目打包压缩后的代码文件，vue-cli创建的vue项目基于 webpack 构建，因此也是webpack来打包。

总结

我们想直接用Vue.js去手动构建一个比较完善的vue项目很难，不过我们可以借助Vue CLI来帮助我们快速构建vue项目，而我们只需在这个项目的基础上改造即可。本文并未讲解关于Vue的语法以及Vue CLI的更多能力，有兴趣的同学可以到Vue.js官方文档和Vue CLI官方文档进一步学习。