Vue入门

󰊒 󰅏

Vue入门

归属:原创     作者: 标签:技巧 IT

已累计阅读241次, 发布于2022-03-22 22:19

安装

  • 安装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;
        }
    }

观点 · Comments

点击右上角󰅏可发表观点,点击访客头像可回复Ta