Vue页面跳转、简单实例、路由、脚手架、组件、项目优化

最新推荐文章于 2023-09-16 14:33:11 发布

liyubao160

最新推荐文章于 2023-09-16 14:33:11 发布

阅读量798

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/u011146511/article/details/105390935

版权

vue 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

***vue中页面跳转

1.router-link跳转

传递参数
<router-link :to="{name:'index',query:{id:'xxx',name:'xxx'}}">
<router-link :to="{name:'index',params:{id:'xxx',name:'xxx'}}">

在目标页面接收参数，注意名字要对应一致
				    created(){
				      //获取路由参数
				      console.log(this.$route.query.name);
				
				    }

2.this.$router.push()

3.a标签可以跳转外部链接，不能路由跳转

跳转页面，params方式传递参数
this.$router.push({
'path':'/majorDetail',
'name':'majorDetail',
params: {majorName:name}
 
 
});

下一个页面获参数，一般在onload中获取
this.$route.params.majorName;




query的方式传递参数
this.$router.push({
   path:'/xxx'
   query:{
     id:id
   }
})

接收参数:

this.$route.query.id

使用this.$emit("事件名称"，参数);和@on事件="监听方法"，传递参数。

***路由与嵌套子路由

<!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->
<script type="text/javascript" src="vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/user">user</router-link>
    <router-link to="/register">register</router-link>
    <router-link to="/user2">user2</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由占位符，路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>
<script type="text/javascript">
	
	const User={

		template:`<div>
		<h1>user组件</h1>
		// 自路由
    <router-link to="/user/childone">子one</router-link>
    <router-link to="/user/childtwo">子two</router-link>
    // 自路由占位符
    <router-view/>
    </div>`
	}

	const Register={

		template:'<h1>register组件</h1>'
	}

	const Register2={

		template:'<h1>register2组件2</h1>'
	}
	const childone={

		template:'<h1>childone</h1>'
	}
	const childtwo={

		template:'<h1>childtwo</h1>'
	}

	// 创建路由实例对象
	const router =new VueRouter({
// 路由规则
routes:[
{path:'/user',
component:User,
children:[
{path:'/user/childone',component:childone},
{path:'/user/childtwo',component:childtwo}
]},
{path:'/register',component:Register},
{path:'/user2',redirect:'/user'},

]
	})

// 创建vue实例对像
const vm=new Vue({
// 指定控制的区域
el:"#app",
data:{},
// 挂载路由实例对象
router:router

})

</script>

***动态路由

***动态路由1---静态参数

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/user/1">user1</router-link>
    <router-link to="/user/2">user2</router-link>
    <router-link to="/user/3">user3</router-link>
    <router-link to="/register">register</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由占位符，路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>
<script type="text/javascript">
	
	const User={

		template:'<h1>动态路由{{$route.params.id}}</h1>'
		}

	const Register={

		template:'<h1>register组件</h1>'
	}

	const Register2={

		template:'<h1>register2组件2</h1>'
	}
	const childone={

		template:'<h1>childone</h1>'
	}
	const childtwo={

		template:'<h1>childtwo</h1>'
	}

	// 创建路由实例对象
	const router =new VueRouter({
// 路由规则
routes:[
{path:'/user/:id',component:User},
{path:'/register',component:Register},
{path:'/user2',redirect:'/user'},

]
	})

// 创建vue实例对像
const vm=new Vue({
// 指定控制的区域
el:"#app",
data:{},
// 挂载路由实例对象
router:router

})

</script>

***动态路由2

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/user/1">user1</router-link>
    <router-link to="/user/2">user2</router-link>
    <router-link to="/user/3">user3</router-link>
    <router-link to="/register">register</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由占位符，路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>
<script type="text/javascript">
	
	const User={
props:['id'],
		template:'<h1>动态路由:{{id}}</h1>'
		}

	const Register={

		template:'<h1>register组件</h1>'
	}

	const Register2={

		template:'<h1>register2组件2</h1>'
	}
	const childone={

		template:'<h1>childone</h1>'
	}
	const childtwo={

		template:'<h1>childtwo</h1>'
	}

	// 创建路由实例对象
	const router =new VueRouter({
// 路由规则
routes:[
{path:'/user/:id',component:User,props:true},
{path:'/register',component:Register},
{path:'/user2',redirect:'/user'},

]
	})

// 创建vue实例对像
const vm=new Vue({
// 指定控制的区域
el:"#app",
data:{},
// 挂载路由实例对象
router:router

})

</script>

***动态路由3---对象参数

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/user/1">user1</router-link>
    <router-link to="/user/2">user2</router-link>
    <router-link to="/user/3">user3</router-link>
    <router-link to="/register">register</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由占位符，路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>
<script type="text/javascript">
	
	const User={
        props:['id','uname','age'],
		template:'<h1>动态路由:{{id}}--{{uname}}--{{age}}</h1>'
		}

	const Register={

		template:'<h1>register组件</h1>'
	}

	const Register2={

		template:'<h1>register2组件2</h1>'
	}
	const childone={

		template:'<h1>childone</h1>'
	}
	const childtwo={

		template:'<h1>childtwo</h1>'
	}

	// 创建路由实例对象
	const router =new VueRouter({
// 路由规则
routes:[
{path:'/user/:id',component:User,props:{uname:'lisi',age:20}},
{path:'/register',component:Register},
{path:'/user2',redirect:'/user'},

]
	})

// 创建vue实例对像
const vm=new Vue({
// 指定控制的区域
el:"#app",
data:{},
// 挂载路由实例对象
router:router

})

</script>

***动态路由4---函数动静态参数

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/user/1">user1</router-link>
    <router-link to="/user/2">user2</router-link>
    <router-link to="/user/3">user3</router-link>
    <router-link to="/register">register</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由占位符，路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>
<script type="text/javascript">
	
	const User={
        props:['id','uname','age'],
		template:'<h1>动态路由:{{id}}--{{uname}}--{{age}}</h1>'
		}

	const Register={

		template:'<h1>register组件</h1>'
	}

	const Register2={

		template:'<h1>register2组件2</h1>'
	}
	const childone={

		template:'<h1>childone</h1>'
	}
	const childtwo={

		template:'<h1>childtwo</h1>'
	}

	// 创建路由实例对象
	const router =new VueRouter({
// 路由规则
routes:[
{path:'/user/:id',component:User,props:route=>({uname:'zs',age:21,id:route.params.id})},
{path:'/register',component:Register},
{path:'/user2',redirect:'/user'},

]
	})

// 创建vue实例对像
const vm=new Vue({
// 指定控制的区域
el:"#app",
data:{},
// 挂载路由实例对象
router:router

})

</script>

***命名路由--路由规则起别名

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    	<!-- 命名路由 -->
    <router-link :to="{name:'user',params:{id:3}}">user1</router-link>
    <router-link to="/user/2">user2</router-link>
    <router-link to="/user/3">user3</router-link>
    <router-link to="/register">register</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由占位符，路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>
<script type="text/javascript">
	
	const User={
        props:['id','uname','age'],
		template:'<h1>动态路由:{{id}}--{{uname}}--{{age}}</h1>'
		}

	const Register={

		template:'<h1>register组件</h1>'
	}

	const Register2={

		template:'<h1>register2组件2</h1>'
	}
	const childone={

		template:'<h1>childone</h1>'
	}
	const childtwo={

		template:'<h1>childtwo</h1>'
	}

	// 创建路由实例对象
	const router =new VueRouter({
// 路由规则
routes:[
{
	//命名路由
name:'user',
	path:'/user/:id',component:User,props:route=>({uname:'zs',age:21,id:route.params.id})},
{path:'/register',component:Register},
{path:'/user2',redirect:'/user'},

]
	})

// 创建vue实例对像
const vm=new Vue({
// 指定控制的区域
el:"#app",
data:{},
// 挂载路由实例对象
router:router

})

</script>

***编程式导航

通过js的api实现跳转

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    	<!-- 命名路由 -->
    <router-link :to="{name:'user',params:{id:3}}">user1</router-link>
    <router-link to="/user/2">user2</router-link>
    <router-link to="/user/3">user3</router-link>
    <router-link to="/register">register</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由占位符，路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>
<script type="text/javascript">
	
	const User={
        props:['id','uname','age'],
		template:'<div><button @click="gotoRegist">跳转到注册页面</button></div>',
		methods:{
			gotoRegist(){
				this.$router.push('/register')//跳转到指定页面
			}
		}
		}

	const Register={

		template:'<div><button @click="goback">返回</button></div>',
		methods:{
			goback(){
				this.$router.go(-1)//后退
			}
		}
	}

	const Register2={

		template:'<h1>register2组件2</h1>'
	}
	const childone={

		template:'<h1>childone</h1>'
	}
	const childtwo={

		template:'<h1>childtwo</h1>'
	}

	// 创建路由实例对象
	const router =new VueRouter({
// 路由规则
routes:[
{
	//命名路由
name:'user',
	path:'/user/:id',component:User,props:route=>({uname:'zs',age:21,id:route.params.id})},
{path:'/register',component:Register},
{path:'/user2',redirect:'/user'},

]
	})

// 创建vue实例对像
const vm=new Vue({
// 指定控制的区域
el:"#app",
data:{},
// 挂载路由实例对象
router:router

})

</script>

***路由5---小综合编程式导航跳转、返回

<div id="app">
 		<h1>Hello App!</h1>
 		<p> <router-link to="/"></router-link></p>
 		<router-view></router-view>

 	</div>
 	<script type="text/javascript">
	//主体部分
	const App={
		
		template:`<div>
		<header class="header">我的后台管理系统</header>
		<div class="main">
		<!-- 左侧区域 -->
		<div class="content left">
		<ul>
		<li><router-link to="/users">用户管理系统</router-link></li>
		<li><router-link to="/rights">权限管理</router-link></li>
		<li><router-link to="/goods">商品管理</router-link></li>
		<li><router-link to="/orders">订单管理</router-link></li>
		<li><router-link to="/settings">系统化设置</router-link></li>

		</ul>
		</div>
		<!-- 右侧区域 -->
		<div class="content right"> <router-view></router-view></div>
		</div>
		</div>`
	}

	const Users={
		data(){

			return {
				userlist:[
				{id:1,name:'zhangsan',age:20},
				{id:2,name:'zhangsan',age:21},
				{id:3,name:'zhangsan',age:22},
				{id:4,name:'zhangsan',age:23}
				]
			}	
		},
		methods:{
			godetails(id){
				console.log(id)
				this.$router.push("/userinfo/"+id)
			}
		},

		template:`<div>
		<h3>用户管理</h3>
		<table>
		<thead><tr><th>编号</th><th>姓名</th><th>年龄</th><th>操作</th></tr></thead>
		<tbody><tr v-for="item in userlist" :key="item.id">
		<td>{{item.id}}</td>
		<td>{{item.name}}</td>
		<td>{{item.age}}</td>
		<td><a href="javascript:;" @click="godetails(item.id)">详情</a></td>

		</tr></tbody>
		</table>
		</div>`,
		
	}


	const UserInfo={
		props:['id'],
		template:`<div>
		<h3>用户详情页{{id}}</h3>
		<button @click="goback">后退</button>
		</div>`,
		methods:{
			goback(){
				this.$router.go(-1)
			}
		}
	}
	const Rights={

		template:'<h3>权限管理</h3>',
		
	}

	const Goods={

		template:'<h3>商品管理</h3>',
		
	}
	const Orders={

		template:'<h3>订单管理</h3>',
		
	}
	const Settings={

		template:'<h3>设置</h3>',
		
	}

	// 创建路由实例对象
	const router =new VueRouter({
// 路由规则
routes:[
{
	path:"/",
	component:App,
	redirect:"/users",
	children:[{path:'/users',component:Users},
	{path:'/userinfo/:id',component:UserInfo,props:true},
	{path:'/rights',component:Rights},
	{path:'/goods',component:Goods},
	{path:'/orders',component:Orders},
	{path:'/settings',component:Settings}]
}
]
})

// 创建vue实例对像
const vm=new Vue({
// 指定控制的区域
el:"#app",
data:{},
// 挂载路由实例对象
router:router

})

</script>

***脚手架的创建---命令行

***脚手架的创建---图形化

windows:命令行vue ui-》然后弹出创建页面

mac：

 1.全局安装 vue-cli
 cnpm install --global vue-cli
 2.创建一个基于 webpack 模板的新项目
 vue init webpack 项目名

或者使用淘宝镜像：

使用淘宝镜像：sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

使用淘宝镜像cnpm下载vuecli脚手架: sudo cnpm install -g @vue/cli

需要安装@vue/cli-init：sudo cnpm install -g @vue/cli-init

查看脚手架版本: vue -V

升级vue脚手架：

卸载旧版本:sudo npm uninstall vue-cli -g

创建一个基于webpack模板的新项目myfirst：

1.cd到myfirst所在的文件夹

2. 执行命令vue init webpack myfirst

3.创建过程中会有一些配置，一直回车就可以了：

4.进入项目myfirst文件，安装并运行：
cd myfirst
cnpm install
cnpm run dev

访问：http://localhost:8080

到此项目创建--安装---运行完成。

开发模式：npm run dev是前端自己开发用的
生产模式：npm run build 打包之后给后端放在服务端上用的

项目的目录结构：

***vue的相关相关配置：

方法一：可以在package.json中配置

方法二：创建一个vue.config.js的文件，在此文件中配置，

***脚手架中没有安装less插件，需要自行安装：

npm install less --save

npm install style-loader css-loader less-loader --save

如果是要webpack打包的话，还需要在webpackbase.config.js中配置如下：
module: {
 
rules: [
 
{
 
test: /\.less$/,   
 
use: ['style-loader', 'css-loader', 'less-loader']  
 
 }
 
]
 
}

***vue脚手架中引入ElementUI

npm i element-ui -S

//在main.js中引入elementui样式 并且注册

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

***vue脚手架中引入axios

cnpm install axios

下面是axios的使用方式：

1.引入包

import axios from 'axios'
2.由于axios不是vue的插件，不能使用Vue.use().所以，要通过控制原型链的方式来引入。

Vue.prototype.$http = axios
// 设置基本路径，必须要设置
axios.defaults.baseURL='http://localhost:8888/demo/'


******跨域报错解决：
因为端口换了，所以涉及到跨域的问题；
在config文件夹下的index.js中：
proxyTable: {
        '/demo': {
            target: 'http://localhost:8888',//目标接口域名
            changeOrigin: true,//是否跨域
            pathRewrite: {
                '^/demo': ''//重写接口,后面可以使重写的新路径，一般不做更改
            }
        }
}

实际上就是用了一个代理，用新的请求路径http://localhost:8888/demo代替原来的http://localhost:8080/demo，这是一个基本路径；


**** URLSearchParams传递参数（application/x-www-form-urlencoded）的方式发送请求
var params=new URLSearchParams();
params.append("username","ddd");
params.append("password","aaa");
this.$http.post('/login',params).then(ret=>{
	console.log(ret.data.name);

    });
     });



*****通过json的形式传递参数
this.$http.post('/login',{username:"lambo",password:"12345678"}).then(ret=>{
	console.log(ret.data.name);

    });
     });

***请求拦截器
this.$http.interceptors.request.use(function(config){
	console.log(config.url)
	return config;
},function(err){

})

***响应拦截器
this.$http.interceptors.response.use(function(res){
	// console.log(res)
	//把数据过滤一下
	// var data=res.data;
	return res.data.age;//这个值会传递给下面post请求中返回的res
},function(err){

})
this.$http.post('/login',this.loginform).then(res=>{
	console.log(res)
    });

***asyc/wait的用法,
async  querydata(){
	const ret=await  this.$http.post('/login',this.loginform);
	console.log(ret);
	}
	

***async/await和promise结合的用法,asyc函数的返回值是Promise的实例对象，asyc关键字用于asyc函数中，await可以得到异步结果。
async function querydata(){
	var ret=await  new Promise(function(resolve,reject){
		setTimeout(function(){},1000);
	})



***asyc/wait得到多个异步请求

async  queryData(){
	var info=await  this.$http.post('/login',this.loginform);//第一个请求,这一个请求完成才会执行下一个语句。
var ret=await  this.$http.post('/update');//第二个请求,可以加参数也可以不加参数。
	
	}

***组件----全局组件

<div id="app">
<button-counter></button-counter>
</div>

<script type="text/javascript">
	Vue.component('button-counter',{
		data:function(){
			return count:0;
		}
	},
	template:`<button @click="handle">点击了{{count}<button>`
	methods:{
		handle:function(){
         this.count++;
	   }
     }
	)
	var vm=new Vue{
		el:"#app",
		data:{}
	}
</script>

***局部组件

<div id="app">
	<hello-world></hello-world>
	<hello-lambo></hello-lambo>
</div>

<script type="text/javascript">
	var helloworld={
		data:function(){
			return {
				msg:'helloworld'
			}
		},
		template:'<div>{{msg}}</div>'
	},
	var hellolambo={
		data:function(){
			return {
				msg:'hellolambo'
			}
		},
		template:'<div>{{msg}}</div>'
	};
	var vm=new Vue{
		el:"#app",
		data:{},
		componets:{"hello-world":helloworld,
"hello-lambo":hellolambo
	}

}
</script>

***浏览器保存token

window.sessionStorage.setItem("token","");保存token

window.sessionStorage.getItem('token')；获取token

window.sessionStorage.clear();销毁token

***eslint报错的解决办法：

在eslintrc.js中的rules：中添加'space-before-function-paren':0,

***第三方的插件

树形表格组件：vue-table-width-tree-grid

https://www.npmjs.com/package/vue-table-with-tree-grid

https://blog.csdn.net/weixin_34234823/article/details/91372747

<template lang="html">
    <zk-table 
        ref="table" 
        sum-text="sum"
        index-text="#" 
        :data="treeTableData.data" 
        :columns="columns" 
        :stripe="props.stripe" 
        :border="props.border" 
        :show-header="props.showHeader" 
        :show-summary="props.showSummary"
        :show-row-hover="props.showRowHover"
        :show-index="props.showIndex"
        :tree-type="props.treeType" 
        :is-fold="props.isFold" 
        :expand-type="props.expandType"
        :selection-type="props.selectionType">
        <!-- 原文中 scope="scope" 会警告， 2.5版本后应为slot-scope="scope"-->
        <template slot="active" slot-scope="scope">
            <!--  ... ... (图中对应状态栏的绿点儿)-->
        </template>
        
        <template slot="empower" slot-scope="scope">
            <!-- ... ... (为授权的图标，可在这里添加点击事件)-->
        </template>
    </zk-table>
</template>
<script>
export default {
    name: 'example',
    //表格各行的数据
    data() {
      return {
        props: {
          stripe: false,//是否显示间隔斑马纹
          border: false,//是否显示纵向边框
          showHeader: true,//是否显示表头
          showSummary: false,//是否显示表尾合计行
          showRowHover: true,//鼠标悬停时，是否高亮当前行
          showIndex: false,//是否显示数据索引
          treeType: true,//是否为树形表格
          isFold: true,//树形表格中父级是否默认折叠
          expandType: false,//是否为展开行类型表格（为 True 时，需要添加作用域插槽, 它可以获取到 row, rowIndex)
          selectionType: false,//是否显示间隔斑马纹
        },
        data: [
          {
            name: '根组织',
            description: '111',
            owner:'admin',
            active: true,
            children: [
              {
                name: '大中华区',
                description: '',
                owner: '',
                active: true,
                children: [
                  {
                    name: '浙江省',
                    description: '',
                    owner: '',
                    active: true,
                    children: [
                      {
                        name: '杭州市',
                        description: '',
                        owner: '',
                        active: true
                      }
                    ]
                  }
                ]
              }
            ],
          },
          {
            name: 'Tom',
            sex: 'male',
            likes: ['football', 'basketball'],
            score: 20,
          },
        ],
        //表格标题数据
        columns: [
            {
                label: "用户组名",
                prop: "name"
            },
            {
                label: "描述",
                prop: "description",
                minWidth: "50px"
            },
            {
                label: "所有者",
                prop: "owner"
            },
            {
                label: "状态",
                prop: "active",
                type: "template",
                template: "active"
            },
            {
                label: "授权",
                type: "template",
                template: "empower"
            }
        ]
      };
    }
  };
</script>

***富文本：

vue-quille-editor：https://gitee.com/jeffka/vue-quill-editor

import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)

安装完成要执行：cnpm run dev

***lodash包：

作用：深拷贝、合并对象

npm i --save lodash

import _ from 'lodash'
Vue.prototype._ = _

const form=_.cloneDeep(obj)

***图表插件：

echarts：https://echarts.apache.org/zh/index.html

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

***进度条

nprogress:https://www.npmjs.com/package/nprogress

npm install --save nprogress

***去除console插件,

打包发布的时候不能包含console

babel-plugin-transform-remove-console插件装好后，还要在babelconfig中设置:

const prodPlugin=[]

if(process.env.NODE_ENV==='production'){

prodPlugin.push('transform-remove-console'}

plugins:[ ...prodPlugin]//发布产品时候的插件数组

***生成打包报告：

方式一：vue-cli-service build --report可以生成report.html文件

方式二：可视化UI面板；

***项目优化：

1.通过vue.config.js修改webpack的默认配置:

module.exports={

}

2.为开发和发布模式指定不同的打包入口文件；可以使用configureWebpack和chainWebpaack

src/main-dev.js

src/main-prod.js

module.exports={

在项目中新建两个入口文件：main-prod.js和main-dev.js

chainWebpaack:config=>{

config.when( process.env.NODE_ENV==='production',config=>{

config.entry('app').clear().add('./src/main-prod.js')

})

config.when( process.env.NODE_ENV==='development',config=>{

config.entry('app').clear().add('./src/main-dev.js')

})

}

3.通过externals加载外部CDN资源

通过import语法导入第三方依赖包，最终会被打包合并到同一个文件中，从而导致打包成功后，单体文件体积过大。

通过webpack的externals不会打包，在使用的时候全局搜索此包，

chainWebpaack:config=>{

config.when( process.env.NODE_ENV==='production',config=>{

config.entry('app').clear().add('./src/main-prod.js')

//不打包插件
config.set('externals',{

vue:'vue',

'vue-router':VueRouter,

axios:'axios'

})

})

config.when( process.env.NODE_ENV==='development',config=>{

config.entry('app').clear().add('./src/main-dev.js')

})

}

}

还需要在index.html中导入相关的.css文件和js文件

4.cdn优化elementui;

在main-prod.js中注释掉elementui按需加载的代码；在index.html的头部区域通过cdn加载elementui的js和css文件。

5.首页内容自定制

chainWebpaack:config=>{

config.when( process.env.NODE_ENV==='production',config=>{

config.entry('app').clear().add('./src/main-prod.js')

//不打包插件
config.set('externals',{

vue:'vue',

'vue-router':VueRouter,

axios:'axios'

})

//首页自定义
config.plugin('html').tag(args=>{
args[0].isProd=true
return args
})

})

//开发模式
config.when( process.env.NODE_ENV==='development',config=>{

config.entry('app').clear().add('./src/main-dev.js')

//首页自定义
config.plugin('html').tag(args=>{
args[0].isProd=false
return args
})

})

}

}

在index.html中：

<% if(htmlWebpackPlugin.options.isProd){%>

这里是相关cdn的js和css

<% }%>

6.路由懒加载

当路由被访问的时候才加载对应的组件：

第一步：安装@babel/plugin-syntax-dynamic-import插件；

第二步：在babel.config.js配置文件中声明该插件；

第三步：将原来的路由改成按需加载的形式:

const Login=()=>import(/* webpackChunkName:"login_home"*/,'../components/Login.vue')

const Home=()=>import(/* webpackChunkName:"login_home"*/,'../components/Home.vue')

这两个组件打包到login_home这一组中；

7.项目上线

准备一个web服务器；

将vue打包生成的dist文件夹托管为静态资源；

8.配置https服务

申请SSL证书：https：//freessl.org

9.使用pm2管理应用------这个是针对nodejs的；

在服务器中安装pm2: npm i pm2 -g;

启动项目： pm2 start 入口文件 --自定义名称；

查看运行的项目：pm2 ls；

重新启动项目：pm2 restart 自定义名称；

停止项目:pm2 stop 自定义名称；

删除项目：pm2 delete 自定义名称；

liyubao160

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue页面跳转、简单实例、路由、脚手架、组件、项目优化

***路由与嵌套子路由<script type="text/javascript" src="vue.js"></script><script src="https://unpkg.com/vu...
复制链接

扫一扫