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')