使用vue-cli创建单页面应用

1. 什么是SPA(单页面应用)

• 单页Web应用（single page web application，SPA）： SPA 是一种特殊的 Web 应用，是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的。
• 它将所有的活动局限于一个 Web 页面中，仅在该 Web 页面初始化时加载相应的 HTML 、 JavaScript 、 CSS 。
• 一旦页面加载完成， SPA 不会因为用户的操作而进行页面的重新加载或跳转，而是利用 JavaScript 动态的变换 HTML（采用的是 div 切换显示和隐藏），从而实现UI与用户的交互。
• 在 SPA 应用中，应用加载之后就不会再有整页刷新。相反，展示逻辑预先加载，并有赖于内容Region（区域）中的视图切换来展示内容。

2. Vue全家桶

• vue
• vue-router 实现单页面应用中的路由管理
• vue-cli 脚手架工具，快速搭建vue项目
• axios 实现http请求
• vuex.js 状态管理器（复杂项目中共享数据的管理）

3. 初始化vue项目的步骤

win10的命令行窗口直接输node命令报错的话，先输入cmd,回车，然后就可以输入node命令

3. 1 安装vue-cli

安装： npm i @vue/cli -g
或者：  npm i "@vue/cli" -g

3.2 检测是否安装vue-cli

vue -V  //注意是大V

显示脚手架vue-cli的版本 @vue/cli 5.0.1

3.3 创建项目

• vue create myapp (myapp为自定义项目名)

• 选择配置项，并安装依赖 （需要一段时间）

• 启动项目

  1. 进入目录
  2. npm run serve
  3. 在浏览器输入： http://localhost:8000
  

4. 项目结构 （了解）

1. README.md    

2.  package.json:   (1)有scripts脚本  npm run serve   (2)项目所需的依赖

3. package-lock.json:   锁定依赖的版本

4. babel.config.js 了解，是babel在转换es6+代码时的配置

5. .gitignore: git的忽略文件，指定的文件和目录不会提交到git仓库

6. node_modules: nodejs的包文件

7. public
	(1)favicon.ico : 网站缩略图
	(2)index.html:  项目中唯一的一个网页，内部有一个#app的div


8. src: 最重要的文件夹，存储项目的源代码

	(1) main.js : 是整个项目的入口文件

	(2) App.vue:  它是一个vue的单文件组件(只要有.vue文件，即为一个独立的组件，组件中有三个标签： template,script,style)

5. 入口文件main.js (了解)

(1) import Vue from 'vue'

	等同于引入vue.js  <script src="./js/vue.js"></script>

(2)import App from './App.vue'

	引入根组件App
	App是单页面应用中的唯一的根组件,以后开发的组件都会放在App内部


(3) Vue.config.productionTip = false
	隐藏开发模式的提示：

(4) 创建vue的根实例

	// h是一个渲染dom的回调,将App组件渲染到id=app的dom结构中
	// $mount('#app'):   #app即为public文件夹中index.html中的<div id="app"></div>

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