前端 Archives - 第9页共20页

分类目录

5月 29

发表于 2022年5月29日 • 1,499 views • 没有评论!

当后端接口还没有完成的时候，前端没必要等。可以自己使用 mock 来构建服务端接口的环境和数据。自己动手，丰衣足食。

安装

pnpm add mockjs vite-plugin-mock -D

配置

在 vite.config.ts 中配置

import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import { defineConfig } from 'vite'
import { viteMockServe } from 'vite-plugin-mock'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    viteMockServe({ 
      supportTs: true,
      mockPath: "./src/mock/source", // 解析，路径可根据实际变动
      localEnabled: true, // 开发环境设为true，
      prodEnabled: false, // 生产环境设为true，也可以根据官方文档格式
      injectCode: 
      ` import { setupProdMockServer } from './src/mock';
        setupProdMockServer(); `,
      watchFiles: true, // 监听文件内容变更
      injectFile: resolve("src/main.ts"), // 在m
    })
  ]
})

新建数据

在 src/mock/source 下新建 user.ts 文件，内容如下：

export default [
  {
    url: "/api/users",
    method: "GET",
    response: () => {
      return {
        code: 0,
        message: "success",
        result: {
          nickname: '神奇动物在哪里',
          gender: 1
        },
      };
    }
  }
]

使用

import axios from 'axios'

axios.create({
  baseURL: import.meta.env.VITE_BASE_URL
})

axios.get("/api/users").then(res => { console.log(res); });

运行起来，看到控制台的网络中请求的状况：

请求网址: http://localhost:3000/api/users
请求方法: GET
状态代码: 200 OK
远程地址: 127.0.0.1:3000
引荐来源网址政策: strict-origin-when-cross-origin

# response
{code: 0, message: "success", result: {nickname: "神奇动物在哪里", gender: 1}}
code: 0
message: "success"
result: {nickname: "神奇动物在哪里", gender: 1}
gender: 1
nickname: "神奇动物在哪里"

5月 26

vue Windi CSS , unocss 使用

发表于 2022年5月26日 • 3,261 views • 没有评论!

vite,vue,前端

原子化 css 的好用是真的好用。
https://antfu.me/posts/reimagine-atomic-css-zh

https://juejin.cn/post/7028841960752283656

https://blog.csdn.net/qq_41499782/article/details/124074678

https://blog.csdn.net/sg_knight/article/details/124097860

https://windicss.org/

https://github.com/unocss/unocss

使用 unocss

https://github.com/unocss/unocss

class 可以参考参考
https://www.tailwindcss.cn/docs/align-items

这里用 pnpm 来安装。

安装添加

pnpm add unocss -D

添加到 vite.config.ts 中

import vue from '@vitejs/plugin-vue'
import Unocss from 'unocss/vite'
import { defineConfig } from 'vite'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Unocss({})
  ]
})

main.ts 中引入

import 'uno.css'

项目中使用

<div class="w-300px h-120px rounded-8px m-20px shadow-md">
</div>

仅仅用样式就可以实现宽300像素高120像素圆角8像素 margin 20 像素，带 md 程度的阴影的div盒子。这样多方便呀。

当你已经在使用了，可以通过 http://localhost:3000/__unocss 查看生成的 css 文件，是不是很人性化，文件量还小。

vue 面试题

https://vue3js.cn/interview/

5月 25

pnpm vite vue 组合

发表于 2022年5月25日 • 659 views • 没有评论!

vite,vue,前端

都说 pnpm vite vue 组合好。那就试试。

# shenya 是项目名
pnpm create vite  shenya

cd shenya

pnpm install

pnpm run dev

如果从来没有使用过 pnpm，第一次创建的时候是要花一点时间。后边就是秒创建了哈。

5月 25

VUE 模式和环境变量

发表于 2022年5月25日 • 573 views • 没有评论!

vue,前端

vue cli 创建项目的时候，默认是不会 .env .env.production 这些文件的。一般，一个大型项目是需要用到不同环境的不同配置。这个时候，手动建立各个 .env 文件是必要的。起点就在 package.json 中的 scripts 里，默认就会有的。当然你可以手动定义名字，然后用 mode 指定。如："staging": "vue-cli-service serve --mode staging" 。

https://cli.vuejs.org/zh/guide/mode-and-env.html

如果是 vite 环境，不用 process，而是用 import.meta。会有一些变化。请看：

https://cn.vitejs.dev/guide/env-and-mode.html#env-files

5月 22

nuxt3 一些特殊

发表于 2022年5月22日 • 651 views • 没有评论!

ssr,前端

nuxt 走约定大于配置的路线，有些问题需要注意一下下。特意记录下来。

如果创建了 pages 目录，但是里边没有文件，就会出现 404。要不去掉 pages 页面，要不填充必须的页面。
试用 NuxtLayout 的时候，layouts 目录下的模板名不要叫 default.vue，会渲染成双倍的 div。

服务端渲染

https://vue3js.cn/interview/vue/ssr.html

https://v3.nuxtjs.org/getting-started/quick-start

这里尝试下 vue ssr 项目。可是，真正应用到项目上，还得服务端做好支持和配置。pm2,nginx 这些也是要处理

演示结果：

初始化安装 nuxt 项目

个人喜欢用 yarn 的

npx nuxi init mengmeng

cd mengmeng

# 加入版本控制
git init 

git add .

git commit -m 'nuxt 初始化项目'

yarn install

# 启动起来看看
yarn dev

构建基本 layout 和跳转

一个 pc 端网站，通常有顶部，中间部分，底部三个部分构成，而顶部和底部，几乎是共用不变的。这种场景，我们很容易想到抽象成模板的方式来做。不过，网站除了这些共用外，还有其他地方共用，暂时就不考虑那么细致。

先删除 app.vue
创建 layouts 目录，在目录中建立一个 base.vue 的模板。内容如下：

<template>
<div class="base-container">
  <div class="header"></div>
  <div class="body">
    <slot></slot>
  </div>
  <div class="footer"></div>
</div>
</template>

<style>
*,
html,
body {
  margin: 0;
  padding: 0;
}
</style>

<style lang="scss" scoped>
.base-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;

  .header {
    display: flex;
    width: 100%;
    height: 80px;
    background-color: aquamarine;
  }

  .body {
    display: flex;
    flex: 1;
  }

  .footer {
    display: flex;
    width: 100%;
    height: 160px;
    background-color: bisque;
  }
}
</style>

新建 pages 目录，该目录下新建 index.vue 文件，该文件作为项目的首页。代码如下：

<template>
<NuxtLayout name="base">
  <div class="container">
    <NuxtLink to="/meets"><h4>meets</h4></NuxtLink>
  </div>
</NuxtLayout>
</template>

<script setup>
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 20px 30px;
}
</style>

meets 是另一个路由对应文件，下边会建立。
- 新建 meets 目录，meets 下新建 index.vue 文件。index 是默认映射。内容如下。

<template>
<div>
<NuxtLayout name="base">
<div class="container">
  <NuxtLink to="/"><h4>home</h4></NuxtLink>
  <NuxtLink to="/meets/5"><h4>详情一</h4></NuxtLink>
</div>
</NuxtLayout>
</div>
</template>

<script>
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 20px 30px;

  h4 {
    margin-top: 12px;
  }
}
</style>

/meets/5 是另一个路由文件，下边会建立

meets 下新建 [id].vue 文件，[]包含的是动态映射，动态详情很好用。内容如下：

<template>
<NuxtLayout name="base">
  <div class="container">
    <h4>id {{ id }}</h4>
  </div>
</NuxtLayout>
</template>

<script setup>
import { ref } from 'vue'

const route = useRoute()

const id = ref(route.params.id)
</script>

<style lang="scss" scoped></style>

这几个文件，串起来就可以组成首页、列表页、详情页三个页面。这刚好是一个项目最基本的构件。上边这些只是最基础最基础的一点点东西。要做好整个项目，这些是远远不够的。

使用 vuetify 作为 ui 框架

https://next.vuetifyjs.com/en/getting-started/installation/

vue add vuetify

5月 12

unocss 相关

发表于 2022年5月12日 • 640 views • 没有评论!

前端

https://cloud.tencent.com/developer/article/1897870

https://baijiahao.baidu.com/s?id=1714962838566249118&wfr=spider&for=pc

https://github.com/unocss/unocss#readme

https://www.oschina.net/p/unocss

5月 11

vue3 相关

发表于 2022年5月11日 • 636 views • 没有评论!

vue,前端

收录下 vue3 相关的文章

5月 11

Component name “home” should always be multi-word.eslint

发表于 2022年5月11日 • 4,081 views • 没有评论!

vue,前端

vue 项目中，出现 Component name "home" should always be multi-word.eslint 这个错误提示，可以改两个地方。

处理方式

修改 vue.config.js 文件，在 defineConfig 中加入 lintOnSave: false ，这个保证编译不会报错。

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false
})

修改 .eslintrc.js 文件，在其中追加配置 overrides 。注意自己的 vue 文件目录配置好。这个保证在 vue 文件中，不会出现警告的波浪线。有强迫症的受不了。

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  },
  overrides: [
    {
      files: ['src/views/**/*.vue'],
      rules: {
        'vue/multi-word-component-names': 0,
      }
    }
  ]
}

5月 08

从零开始构建一个 vue + ts 项目

发表于 2022年5月8日 • 847 views • 没有评论!

vue,前端

升级 node，vue-cli 到最新版本

node -v

# 更新 node 到最新版本
sudo n stable

# 更新 pnpm
pnpm add -g pnpm

# 更新 yarn
yarn set version latest

# pnpm 安装 @vue/cli
pnpm install @vue/cli -g

# 或使用 yarn 安装
yarn global add @vue/cli

# 创建项目,指定包管理工具
vue create -m pnpm demo

创建 vue 项目

这里就建一个 ts 的，使用 sass 的 vue3.x 项目,使用手动选择模式，包管理工具使用 yarn 。一路选择和回车即可：

vue create -m yarn zeipan

step-1

? Please pick a preset:
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
❯ Manually select features

step-2

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
 ◉ Babel
 ◉ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
❯◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

step-3

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
❯ 3.x
  2.x

step-4

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
❯ Sass/SCSS (with dart-sass)
  Less
  Stylus

一路选择回车后，提示安装成功。进入项目，运行项目。

cd zeipan

yarn serve

非你网

Write the Code. Change the World.

安装

配置

新建数据

使用

使用 unocss

vue 面试题

相关

服务端渲染

初始化安装 nuxt 项目

构建基本 layout 和跳转

使用 vuetify 作为 ui 框架

处理方式

升级 node，vue-cli 到最新版本

创建 vue 项目

Write the Code. Change the World.

安装

配置

新建数据

使用

使用 unocss

vue 面试题

相关

服务端渲染

初始化安装 nuxt 项目

构建基本 layout 和 跳转

使用 vuetify 作为 ui 框架

处理方式

升级 node，vue-cli 到最新版本

创建 vue 项目

构建基本 layout 和跳转