Vue.js实现 项目 生成到上线的全过程

Posted 2020-11-22 @@@-小草

单页应用(SPA)
单页Web应用（single page web application，SPA），就是将系统所有的操作交互限定在一个web页面中。单页应用程序 (SPA) 是加载单个html页面，系统的不同功能通过加载不同功能组件的形式来切换，不同功能组件全部封装到了js文件中，这些文件在应用开始访问时就一起加载完，所以整个系统在切换不同功能时，页面的地址是不变的，系统切换可以做到局部刷新，也可以叫做无刷新，这么做的目的是为了给用户提供更加流畅的用户体验。

使用vue自动化工具可以快速搭建单页应用项目目录。该工具为现代化的前端开发工作流提供了开箱即用的构建配置。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：

// 生成一个基于 webpack 模板的新项目 my-project:项目名称
vue init webpack my-project

// 启动开发服务器 ctrl+c 停止服务
cd my-project
npm install
npm run dev
1
2
3
4
5
6
7
项目目录结构说明

需要关注的是上面标注的三个目录：

文件夹1(src)，主开发目录，要开发的单文件组件全部在这个目录下
文件夹2(static)，静态资源目录，所有的css，js文件放在这个文件夹
文件夹3(dist)，项目打包发布文件夹，最后要上线单文件项目文件都在这个文件夹中
还有node_modules目录是node的包目录，config是配置目录，build是项目打包时依赖的目录。

页面结构说明

整个项目是一个主文件index.html,index.html中会引入src文件夹中的main.js,main.js中会导入顶级单文件组件App.vue,App.vue中会通过组件嵌套或者路由来引用components文件夹中的其他单文件组件。

组件嵌套
将单文件组件组合在一起有两种方式，一种是嵌套方式，一种用路由的方式。嵌套的方式代码如下：

下图示中，假设组件A中要嵌入组件B

<template>

// 在A组件中使用B组件
<B_zujian></B_zujian>
</template>

<script>
// 先导入B组件，其中‘@‘表示src目录，组件后的vue扩展名可以省略
import B_zujian from ‘@/components/B_zjian‘

export default{
name:‘A_zujian‘,
data:function(){
return {
iNum:0
}
},
// 接着在components属性选项中注册
components:{
B_zujian
}
}

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
路由
可以通过路由的方式在一个组件中加载其他组件，要使用路由功能，需要在main.js中先导入路由的包,然后在组件对象中还需要包含它。

import router from ‘./router‘

new Vue({
.....
router
})
1
2
3
4
5
6
组件中通过路由标签来加载其他的路由

<!-- 路由标签 -->
<router-view></router-view>

<!-- 简写成下面一个标签的形式： -->
<router-view/>
1
2
3
4
5
路由标签里面加载哪个组件呢？在router文件中的index.js文件中设置

import Vue from ‘vue‘
import Router from ‘vue-router‘

// 导入对应组件 ‘@‘ 表示src文件夹
import MainList from ‘@/components/MainList‘
import UserList from ‘@/components/UserList‘
import UpDate from ‘@/components/UpDate‘

// 使用路由模块的固定写法
Vue.use(Router)

// path为‘/‘表示路由默认加载的组件
// 这些路由默认设置的是App.vue中的路由标签加载的组件
export default new Router({
routes: [
{
path: ‘/‘,
name: ‘MainList‘,
component: MainList
},
{
path: ‘/user‘,
name: ‘UserList‘,
component: UserList
},
{
path: ‘/update‘,
name: ‘UpDate‘,
component: UpDate
}
]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
通过链接可以切换路由标签里面对应的组件，链接的地址是上面index.js文件中定义的path值，不过链接标签是”router-link”,链接地址用’to’来定义：

<router-link to="/">股票信息</router-link>
<router-link to="/user">个人中心</router-link>
1
2
链接地址中可以传递参数，格式如下：

// name对应的是路由中定义的一个path对应的name属性
<router-link :to=‘{name:"UpDate",params:{code:item.code}}‘>
1
2
有时候需要在组件的js中跳转页面，也就是改变路由，改变路由有下面这些方式：

// 当前页面重新加载
// -1指的是浏览器记录的上一步
this.$router.go(‘-1‘);

// 跳转到另外一个路由
this.$router.push({path:‘/user‘});

// 获取当前的路由地址
var sPath = this.$route.path;
1
2
3
4
5
6
7
8
9
数据请求及跨域
数据请求
数据请求使用的是ajax，在vue中使用的axios.js，这个文件可以在index.html文件中引入，也可以作为模块导入，在main.js中导入这个模块，然后将它绑定在Vue类的原型上。

import axios from ‘axios‘
Vue.prototype.axios = axios
1
2
在组件的js代码中使用axios：

this.axios({......})
1
跨域请求
vue的自动化工具提供了开发的服务器，我们在这个服务器环境下开发，改动代码可以马上更新显示，错误了还有代码提示，非常方便，但是，如果我们组件中需要数据，而且数据在另一个服务器环境下运行，我们就需要跨域请求数据，vue工具中可以使用代理来跨域请求，设置的方法是：在项目的config文件夹中，打开index.js,在proxyTable一项中设置：

// ‘http://localhost:7890‘ 表示的是要跨域请求的地址
// 如果请求的地址是：‘http://localhost:7890/index_data‘
// 在请求时就可以写成: ‘/apis/index_data‘

‘/apis‘: {
target: ‘http://localhost:7890‘,
changeOrigin: true,
pathRewrite: {
‘^/apis‘: ‘‘
}
}
1
2
3
4
5
6
7
8
9
10
11
打包上线
项目开发完成后，需要把请求数据的代理地址改成和提供数据的服务器在同一个域的地址，因为最终会把前端代码放在和数据在同一个域的服务器下面运行。

// 将下面的请求地址
‘/apis/index_data‘

// 改成
‘/index_data‘
1
2
3
4
5
改完请求地址后，就可以将代码打包，生成最终可以上线的单文件结构：

// 打开终端，ctrl+c停掉开发服务器，执行下面的命令

npm run build
1
2
3
自动化程序会将打包的文件自动生成到项目的dist文件夹中。

将这些文件拷贝到提供数据服务的服务器的静态目录文件夹中，完成最终的上线！
————————————————
版权声明：本文为CSDN博主「Step_Top」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_41333582/article/details/82706262