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

最新推荐文章于 2024-08-25 19:52:55 发布

原创最新推荐文章于 2024-08-25 19:52:55 发布 · 362 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue2 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了单页面应用(SPA)的概念及特点，并详细讲解了使用Vue全家桶进行项目搭建的过程，包括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')