1. 介绍

• Vue(读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。
• Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
• 另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
• —————————————— 摘自：https://cn.vuejs.org/v2/guide/index.html

相关的基础知识：

2. 安装

2.1 安装node

官网下载安装包，由于我使用的是Mac系统，大家可以根据自己的系统来下载，下载地址：https://nodejs.org/zh-cn/download/

下载	根据提示安装

验证是否安装成功：

node -v
npm -v

安装成功！

2.2 安装Vue

1.换源安装cnpm（把镜像源配置为淘宝镜像源）：

sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

2. 安装Vue项目脚手架：

sudo cnpm install -g @vue/cli

3. 查看vue-cli是否成功

vue info

注意：如果终端安装失败时，可以清空npm缓存，再重复执行失败的步骤

npm cache clean --force

3. 项目创建

3.1 创建项目

1.打开命令窗口，进入要创建项目的目录路径：

cd 项目路径..

2.创建项目（项目名为demo）:

vue create hello-world

3.按提示选择Vue的版本，我选择默认，按Enter:

安装成功：

3.2 目录结构

可以看到Vue的目录结构如下：

目录结构解析：

├── v-proj
| ├── node_modules // 当前项目所有依赖，一般不可以移植给其他电脑环境
| ├── public
| | ├── favicon.ico // 标签图标
| | └── index.html // 当前项目唯一的页面
| ├── src
| | ├── assets // 静态资源img、css、js
| | ├── components // 小组件
| | ├── views // 页面组件
| | ├── App.vue // 根组件
| | ├── main.js // 全局脚本文件（项目的入口）
| | ├── router
| | | └── index.js// 路由脚本文件（配置路由 url链接 与 页面组件的映射关系）
| | └── store
| | | └── index.js// 仓库脚本文件（vuex插件的配置文件，数据仓库）
| ├── README.md
└ └── package.json等配置文件

3.3 两个文件（App.vue及main.js））

1. vue组件(.vue文件)：

import HelloWorld from './components/HelloWorld.vue'
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
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>

解析：

• template：有且只有一个根标签
• script：必须将组件对象导出 export default {}
• style: style标签明确scoped属性，代表该样式只在组件内部起作用(样式的组件化)

2. 全局脚本文件main.js（项目入口）

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({

render: h => h(App),
}).$mount('#app')

4.运行项目

进入新创建项目的目录，然后执行npm run serve命令，开始构建：

构建成功：

浏览器打开：http://localhost:8080/，可以看到启动成功！

4.2 如何部署到别的环境

首先要有这样一个思路，就是任何一个项目，都是在一个适合自己的特定环境下运行的，所以我们在拷贝项目的时候，可以把核心代码拿下来然后在本地安装环境。VUE项目就是如此。

具体思路就是：

1.拷贝public、src、package.json，前两个是核心代码，后面的是环境配置。

2.执行cnpm/npm install，会生成node_modules的文件夹。

3.npm run serve 运行项目就ok了。