九、Vue

9.1 安装

• 安装node

  $ wget https://nodejs.org/dist/v14.15.4/node-v14.15.4-linux-x64.tar.xz
  $ tar xf node-v14.15.4-linux-x64.tar.xz 
  

• 配置环境变量

  $ vim /etc/profile
  
  # 添加环境变量 /opt/python3.7.9/bin
  PATH="/opt/node-v14.15.4-linux-x64/bin:/opt/python3.7.9/bin:/opt/nginx1.19.6/sbin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/root/bin"
  
  $ source /etc/profile  # 生效
  
  

• 安装vue

  $ npm install vue  # vue
  $ npm install -g @vue/cli  # vue-cli
  $ npm install vue-router  # vue-router
  $ sudo npm install -g cnpm --registry=https://registry.npm.taobao.org --verbose  # cnpm
  $ vue --version  # 检测版本
  
  

9.2 开始

• 依赖

  $ vue add element  # 饿了么UI（会改变配置文件）
  $ npm i element-ui -S  # 饿了么UI
  $ vue add router  # 路由
  $ npm install -D sass-loader sass  # Sass
  $ cnpm i axios -S  # ajax
  $ cnpm i vue-lazyload -S  # 懒加载
  $ npm install vuex --save  # store
  
  

• 启动

  $ vue create project-name  # 新建项目
  $ vue init webpack luffy-project  # 旧版本的init功能新建项目
  $ cd  project-name
  $ npm run serve  # 本地运行
  $ npm run build  # 编译生成静态文件
  
  

9.3 路由Router

• 路由配置router/index.js

  import VueRouter from 'vue-router'
  import Home from '../views/Home.vue'
  
  Vue.use(VueRouter)
  
  const routes = [
    {
      path: '/',
      redirect: '/home'  // 重定向
    },
    {
      path: "/home",
      name: 'home',
      component: Home
    },
    {
      path: '/notes',
      name: 'notes',
      component: () => import('../views/Notes.vue')  // 懒加载
    }
  ]
  
  

• 视图views/Home.vue

  <template>
    <div id="home">
      <div v-for="menu in homeMenu" :key="menu.id">
        <router-link :to="{ name: menu.href }">
          <span class="iconfont" v-html="menu.title"></span>
        </router-link>
      </div>
      <div><button @click="like">支持</button>{{ likeNum }}</div>
    </div>
  </template>
  
  <script>
  export default {
    name: "Home",
    data() {
      return {
        homeMenu: [
          { id: 1, title: "&#xe635;笔记", href: "notes" },
          { id: 2, title: "&#xe62d;作品", href: "opus" },
          { id: 3, title: "&#xe728;关于", href: "about" },
        ],
        likeNum: 0,
      };
    },
    methods: {
      // 支持数：/api/home/like_num
      getLikeNum() {
        this.$http
          .likeNum()
          .then((res) => {
            this.likeNum = res.data.like_num;
          })
          .catch((err) => {
            console.log(err);
          });
      },
      // 支持：/api/home/like_num
      like() {
        this.$http
          .likeNumPost()
          .then((res) => {
            this.likeNum = res.data.like_num;
          })
          .catch((err) => {
            console.log(err);
          });
      },
    },
    created() {
      this.getLikeNum();
    },
  };
  </script>
  
  <style scoped>
  </style>
  
  

• 接口：安装ajax

  $ cnpm i axios -S  # ajax
  

• 接口：配置main.js

  // 导入axios
  import * as api from './restful/api'
  Vue.prototype.$http = api;
  
  

• 接口：restful/api.js

  import Axios from 'axios'
  // 设置公共的url接口
  // Axios.defaults.baseURL = 'http://www.helloxjn.com/api/';
  // 测试接口
  Axios.defaults.baseURL = 'http://localhost:8000/api/';
  
  // 添加请求拦截器
  Axios.interceptors.request.use(function (config) {
  	// 在发送请求之前做些什么
  	if (localStorage.getItem('token')) {
  		config.headers.AUTHENTICATION = localStorage.getItem('token')
  	}
  	return config;
  }, function (error) {
  	// 对请求错误做些什么
  	return Promise.reject(error);
  });
  
  // ########################################################################################
  
  // 菜单：/api/home/menu
  export const menu = () => {
  	return Axios.get('home/menu').then(res => res.data);
  }
  // 页脚：/api/home/footer
  export const footer = () => {
  	return Axios.get('home/footer').then(res => res.data);
  }
  
  // 获取支持数：/api/home/like_num
  export const likeNum = () => {
  	return Axios.get('home/like_num').then(res => res.data);
  }
  // 更新支持数：/api/home/like_num
  export const likeNumPost = () => {
  	return Axios.post('home/like_num').then(res => res.data);
  }
  
  

• 路由传参：router/index.js

  const routes = [
    {
      path: '/notes/article',
      name: 'article',
      component: () => import('../views/Article.vue')  // 懒加载
    }
  ]
  
  

• 路由传参：传值notes.vue

  <template>
    <div id="notes">
      <router-link :to="{ name: 'article', query: { hash_id: n.hash_id } }">文章</router-link>
    </div>
  </template>
  
  

• 路由传参：取值article.vue

  <template>
    <div id="notes">
      {{ this.$route.query.hash_id }}
    </div>
  </template>
  
  

9.4 组件

• 调用方式

  <template>
    <div id="app">
      <!-- 组件传递参数menuList -->
      <Header :menuList="menuList"></Header>
      <!-- 路由 -->
      <router-view />
      <Footer :menuList="menuList" :footer="footer"></Footer>
    </div>
  </template>
  
  <script>
  // @ is an alias to /src
  import Header from "@/components/Header.vue";
  import Footer from "@/components/Footer.vue";
  export default {
    name: "Home",
    components: {
      Header,
      Footer,
    },
    data() {
      return {
        menuList: [],
        footer: [],
      };
    },
    methods: {
      // 菜单：/api/home/menu
      getMenu() {
        this.$http
          .menu()
          .then((res) => {
            this.menuList = res.data;
          })
          .catch((err) => {
            console.log(err);
          });
      },
      // 页脚菜单：/api/home/footer_menu
      getFooter() {
        this.$http
          .footer()
          .then((res) => {
            this.footer = res.data[0];
          })
          .catch((err) => {
            console.log(err);
          });
      },
    },
    created() {
      this.getMenu();
      this.getFooter();
    },
  };
  </script>
  
  

• 双向绑定

  <input v-model="name" type="text" :placeholder="" />
  
  

9.5 搭建简易服务器（略）

• 启动服务器

  $ cd server
  $ npm install  # 安装依赖
  $ npm install pm2 -g  # 安装进程工具
  $ pm2 start app.js  # 启动模拟的服务器接口
  
  

• 启动前端

  $ cd html-pro-ele
  $ npm install
  $ npm run build  
  
  

9.6 解决nginx部署后页面刷新404问题

• nginx.conf

  server {
      listen       8102;
      server_name  localhost;
      charset utf-8;
      location / {
          root /root/site_html/dist;
          index index.html;
          try_files $uri $uri/ /index.html;
      }
  }