前端 Archives - 第10页共21页

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日 • 701 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日 • 620 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日 • 696 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日 • 689 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日 • 679 views • 没有评论!

vue,前端

收录下 vue3 相关的文章

5月 11

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

发表于 2022年5月11日 • 4,133 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日 • 905 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

5月 07

npm,yarn,pnpm 相关

发表于 2022年5月7日 • 729 views • 没有评论!

前端,工具

npm 简单介绍

npm 中文文档

npm 英文官网

npm 为你和你的团队打开了连接整个 JavaScript 天才世界的一扇大门。它是世界上最大的软件注册表，每星期大约有 30 亿次的下载量，包含超过 600000 个包（package）（即，代码模块）。来自各大洲的开源软件开发者使用 npm 互相分享和借鉴。包的结构使您能够轻松跟踪依赖项和版本。

npm 由三个独立的部分组成：

网站
注册表（registry）
命令行工具 (CLI)

网站是开发者查找包（package）、设置参数以及管理 npm 使用体验的主要途径。

注册表是一个巨大的数据库，保存了每个包（package）的信息。

CLI 通过命令行或终端运行。开发者通过 CLI 与 npm 打交道。

npm 下载安装

https://nodejs.org/en/download/

下载对应的系统对应的版本安装即可。

配置淘宝镜像

# 配置为淘宝镜像（旧的）
npm config set registry https://registry.npm.taobao.org

# 配置为淘宝镜像（新的）
npm config set registry  https://registry.npmmirror.com
# 查看镜像
npm config get registry

# 切回默认镜像
npm config set registry https://registry.npmjs.org

更新升级 node，方式一

# 查看当前 node 版本 
node -v

# 查看 node 的版本
npm view node versions

# 安装 n
sudo npm install -g n

# 通过 n 来更新 node 到最新版本
sudo n latest

# 通过 n 来更新 node 到稳定版本
sudo n stable

# 通过 n 来更新 node 到具体版本
sudo n 15.0.0

更新升级 node，方式二

# 最新版本
npm install npm@latest -g

# 下一个版本
npm install npm@next -g

yarn 简单介绍

yarn1 中文文档

yarn2 中文文档

Yarn 对你的代码来说是一个软件包管理器，你可以通过它使用全世界开发者的代码，或者分享自己的代码给全世界的开发者。Yarn 做这些事情快捷、安全、可靠，所以你不用担心什么。

通过 Yarn 你可以使用其他开发者针对不同问题的解决方案，简化你开发软件的过程。如果使用过程中遇到问题，你可以将其上报或者贡献解决方案。一旦问题被修复，你可以使用 Yarn 更新。

代码通过软件包（package）的方式被共享。一个软件包里包含了所有需要共享的代码，以及一个描述软件包信息的文件 package.json （叫做清单）。

安装 yarn

npm install -g yarn

yarn -v

# 更新 yarn 到最新版本
yarn set version latest

yarn 用法

yarn 镜像

# 查看
yarn config get registry

# 设置为淘宝镜像
yarn config set registry https://registry.npmmirror.com

# 设置为默认官方镜像
yarn config set registry https://registry.yarnpkg.com

pnpm 简单介绍

pnpm 中文文档

知乎

安装

# 安装
sudo npm install pnpm -g

# 查看镜像
pnpm config get registry

# 设置为淘宝镜像
pnpm config set registry https://registry.npmmirror.com/

# 更新升级
pnpm add -g pnpm

# 获取 pnpm安装位置
which pnpm

# 查找更多 pnpm
mdfind -n pnpm

使用

pnpm install 包  // 
pnpm i 包
pnpm add 包    // -S  默认写入dependencies
pnpm add -D    // -D devDependencies
pnpm add -g    // 全局安装

移除

pnpm remove 包                            //移除包
pnpm remove 包 --global                   //移除全局包

更新

pnpm up                //更新所有依赖项
pnpm upgrade 包        //更新包
pnpm upgrade 包 --global   //更新全局包

设置存储路径

pnpm config set store-dir /path/to/.pnpm-store

非你网

Write the Code. Change the World.

使用 unocss

vue 面试题

相关

服务端渲染

初始化安装 nuxt 项目

构建基本 layout 和跳转

使用 vuetify 作为 ui 框架

处理方式

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

创建 vue 项目

npm 简单介绍

npm 下载安装

yarn 简单介绍

pnpm 简单介绍

Write the Code. Change the World.

使用 unocss

vue 面试题

相关

服务端渲染

初始化安装 nuxt 项目

构建基本 layout 和 跳转

使用 vuetify 作为 ui 框架

处理方式

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

创建 vue 项目

npm 简单介绍

npm 下载安装

yarn 简单介绍

pnpm 简单介绍

构建基本 layout 和跳转