day14

2024-03-18 17:34:04

一、vue-cli脚手架升级

1.卸载vue-cli脚手架

npm uninstall vue-cli -g

2.安装最新版本脚手架

npm i @vue/cli -g

查看vue脚手架版本

vue -V

3.初始化项目

vue create 项目名称

初始化过程：

? Please pick a preset:
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
> Manually select features    选择自定义初始化过程
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex
Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No

? Where do you prefer placing config for Babel, ESLint, etc.?
  In dedicated config files
> In package.json 
? Save this as a preset for future projects? (y/N) n

4.运行项目

npm run serve

5.代理配置

(1)安装axios

(2)在项目根目录下创建一个名为vue.config.js的文件，在文件中编写如下内容：

module.exports = {
    devServer:{
        proxy:{
            '/api':{
                target:'http://localhost:3000'
            }
        }
    }
}

(3)重启项目

(4)在页面组件中发起网络请求

二、数据可视化

1.highcharts

官网：https://www.highcharts.com.cn/

2.echarts

官网：http://echarts.apache.org/zh/index.html

3.在vue中使用echarts

(1)安装

npm i echarts

(2)引入

var mychart = require('echarts')

(3)初始化

mounted(){
    this.myCharts = mychart.init(document.getElementById('chart'));
    this.drawChart();
}

methods:{
        drawChart(){
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '本周订单数量'
                },
                tooltip: {},
                legend: {
                    data:['数量']
                },
                xAxis: {
                    data: ["周一","周二","周三","周四","周五","周六","周日"]
                },
                yAxis: {},
                series: [{
                    name: '数量',
                    type: 'bar',
                    data: [15, 20, 36, 55,10, 10, 20]
                }]
            };
            this.myCharts.setOption(option)
        }
 }

三、服务端渲染

优势：

1.更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。

2.更快的内容到达时间

劣势：

1.开发条件所限。node+vue

2.涉及构建设置和部署的更多要求

3.更多的服务器端负载

1.vue-server-render

(1)初始化node项目

在一个空的文件夹中初始化一个node项目

npm init

(2)安装vue和vue-server-renderer依赖

npm i vue vue-server-renderer

(3)通过vue-server-renderer渲染vue实例

const Vue = require('vue')//引入vue
//实例化vue实例，设置数据和模板内容
const app = new Vue({
    data:{
        msg:'ssr学习'
    },
    template:'<div>{{ msg }}</div>'
})
//引入vue-server-renderer
const renderer = require('vue-server-renderer').createRenderer();
//调用renderToString，把vue实例中的模板内容渲染成字符串
renderer.renderToString(app,(err,html)=>{
    if(err) throw err;
    console.log(html)
})

(4)启动服务器

const Vue = require('vue')//引入vue
const express = require('express')//引入express
const server = express()
//实例化vue实例，设置数据和模板内容
const app = new Vue({
    data:{
        msg:'ssr学习'
    },
    template:'<div>{{ msg }}</div>'
})
//引入vue-server-renderer
const renderer = require('vue-server-renderer').createRenderer();

server.get('/index',(req,res)=>{
    //调用renderToString，把vue实例中的模板内容渲染成字符串
    renderer.renderToString(app,(err,html)=>{
        if(err) throw err;
        res.end(html)
    })
})

server.listen(3000,()=>{
    console.log('服务运行在3000端口')
})

(5)引入文件系统

//初始化node项目 npm init
//安装需要使用的依赖 npm i vue vue-server-renderer express
const Vue = require('vue')//引入vue
const express = require('express')//引入express
const server = express()
const fs = require('fs')
//实例化vue实例，设置数据和模板内容
const app = new Vue({
    data:{
        msg:'ssr学习'
    },
    template:'<div>{{ msg }}</div>'
})
//引入vue-server-renderer，并调用createRenderer方法创建一个实例
const renderer = require('vue-server-renderer').createRenderer({
    template:fs.readFileSync('./index.html','utf-8')
});
//通过服务器监听一个get请求
server.get('/index',(req,res)=>{
    //调用renderToString，把vue实例中的模板内容渲染成字符串
    renderer.renderToString(app,(err,html)=>{
        if(err) throw err;//如果有错误，则抛出错误信息
        res.end(html)//把模板内容响应在页面上
    })
})
//监听3000端口
server.listen(3000,()=>{
    console.log('服务运行在3000端口')
})

在index.html中==必须==要有占位符

<!--vue-ssr-outlet-->

2.nuxt