Vite + egg.js 创建项目

闲来无事 想提前踩一踩vue3的坑 也没太想好要写点什么东西 一遍想一遍研究吧 芭芭拉冲鸭！

1. 技术选型
   • 前端：Vue3.0 + vite + axios
   • 后端： nodejs + eggjs
   • 数据库： SQL
2. 环境依赖：
   • node: 14.4.0
   • npm: 6.14.5
3. 插件
   • eslint stylelint

github：github.com/zuojinlin/b…

欢迎大佬提出优化建议

废话不多说 架子先搭起来！

  # yarn 安装 create-vite-app
  yarn global add create-vite-app
  
  # 创建项目目录
  create-vite-app vite-bbla
  
  # 安装依赖及eslint依赖
  yarn install 
  yarn install eslint prettier eslint-plugin-vue eslint-plugin-prettier eslint-config-prettier

接下来是踩坑第一步 配置.eslintrc.js

在配置.eslintrc.js的时候真是让我煞费苦心 由于vue3支持template root下允许多个子节点 但是配置

	'vue/no-multiple-template-root': 'off',

并未生效 苦苦找不到原因 最后还是村长大佬@杨村长给出的方案

版本要够新（至少在这个以上），然后vscode要以根目录打开项目 重点是要跟目录打开！！ 重启eslint插件后就可以生效了

然后是配置.prettierrc.js

// 这就是一些基本的配置了 还是以个人项目为准
module.exports = {
  semi: false, // 格式化不加分号
  trailingComma: "all",
  singleQuote: true,
  printWidth: 100,
  tabWidth: 2,
  endOfLine:"auto"
};

踩坑第二步 配置vue-router

首先先是引入router

npm install vue-router@next

由于路由配置和router-lint跳转随便一搜就搜得到我就不演示了 想直接试一下编程式跳转

问题来了

vue3是没有全局变量Vue的 也没有全局this去找到router

这时候就需要新的api useRouter和useRoute

// login
import { useRouter } from 'vue-router'
const router = useRouter()
router.push({
  name: 'Home',
  params: { msg: res.data.msg },
})

// user
import { useRoute } from 'vue-router'
const route = useRoute()
const user = reactive({
  msg: route.params.msg,
})

持续优化更新中。。。

推一波大佬的vue3上手视频Young村长【全网首发】Vue3.0光速上手「持续更新中」

2020年11月15日17:01:13更新

使用mysql完成一个简易登陆注册

首先在后端项目里配置数据库配置

    // config/config.default.js
    config.mysql = {
    client: {
      // host
      host: 'localhost',
      // 端口号
      port: '3306',
      // 用户名
      user: 'root',
      // 密码
      password: '*******',
      // 数据库名
      database: 'bbla',
    },
    // 是否加载到 app 上，默认开启
    app: true,
    // 是否加载到 agent 上，默认关闭
    agent: false,
  };
  
  // plugin.js
  
  exports.mysql = {
    enable: true,
    package: 'egg-mysql',
  };
  
  // register.js
  
  'use strict';

  const Controller = require('egg').Controller;

  class RegisterController extends Controller {
    async index() {
      const { ctx, app } = this;
      const queryParams = ctx.request.body;
      const userInfo = await app.mysql.select('user', {
        where: {
          user: queryParams.user,
          password: queryParams.password,
        },
      });
      if (userInfo && userInfo.length > 0) {
        ctx.body = {
          code: 2,
          title: '该账户已被注册！',
          msg: `该账户已被注册！：${queryParams.user}`,
        };
      } else {
        const result = await app.mysql.insert('user', { user: queryParams.user, password: queryParams.password });
        console.log(result);
        ctx.body = {
          code: 1,
          title: '注册成功！',
          msg: `欢迎：${queryParams.user}`,
        };
      }
    }
  }

  module.exports = RegisterController;

前端代码：

    // 首先引入axios
    npm install axios

封装的事之后再干 先简单封装一层

这时候坑就又来了 没有了Vue变量 要如何吧$axios挂载到全局上呢

这时候就需要setup中的一个新特性globalProperties

// main.js
    app.config.globalProperties.$axios = axios

//page.vue
    const { ctx } = getCurrentInstance()
    const res = await ctx.$axios.post('/api/login', form)

大功告成 持续优化更新中。。。

2020年11月19日17:00:32更新：

感冒头疼了一周 毫无思绪 随便写了两个demo 一个组件间的传值 一个todolist

不得不说vue3的代码写出来之后整洁度分分钟up

金莲喊我喝药了 溜了

持续优化更新中。。。