都说 pnpm vite vue 组合好。那就试试。
# shenya 是项目名
pnpm create vite shenya
cd shenya
pnpm install
pnpm run dev
如果从来没有使用过 pnpm,第一次创建的时候是要花一点时间。后边就是秒创建了哈。
都说 pnpm vite vue 组合好。那就试试。
# shenya 是项目名
pnpm create vite shenya
cd shenya
pnpm install
pnpm run dev
如果从来没有使用过 pnpm,第一次创建的时候是要花一点时间。后边就是秒创建了哈。
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。 会有一些变化。请看:
nuxt 走约定大于配置的路线,有些问题需要注意一下下。特意记录下来。
试用 NuxtLayout 的时候,layouts 目录下的模板名不要叫 default.vue,会渲染成双倍的 div。
https://juejin.cn/post/7038957796351541261
https://juejin.cn/post/7080007366808666119
https://vue3js.cn/interview/vue/ssr.html
https://v3.nuxtjs.org/getting-started/quick-start
这里尝试下 vue ssr 项目。可是,真正应用到项目上,还得服务端做好支持和配置。pm2,nginx 这些也是要处理
演示结果:
个人喜欢用 yarn 的
npx nuxi init mengmeng
cd mengmeng
# 加入版本控制
git init
git add .
git commit -m 'nuxt 初始化项目'
yarn install
# 启动起来看看
yarn dev
一个 pc 端网站,通常有顶部,中间部分,底部三个部分构成,而顶部和底部,几乎是共用不变的。这种场景,我们很容易想到抽象成模板的方式来做。不过,网站除了这些共用外,还有其他地方共用,暂时就不考虑那么细致。
<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>
<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 是另一个路由文件,下边会建立
<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>
这几个文件,串起来就可以组成首页、列表页、详情页三个页面。这刚好是一个项目最基本的构件。上边这些只是最基础最基础的一点点东西。要做好整个项目,这些是远远不够的。
https://next.vuetifyjs.com/en/getting-started/installation/
vue add vuetify
强迫症。不喜欢开机自启动向日葵。那么就关掉向日葵自启动吧。这里是 mac
打开终端,编辑下边这些文件,将
cd /Library/LaunchAgents/
sudo vim com.oray.sunlogin.agent.plist
sudo vim com.oray.sunlogin.startup.plist
cd /Library/LaunchDaemons
sudo vim com.oray.sunlogin.helper.plist
sudo vim com.oray.sunlogin.plist
https://github.com/barryvdh/laravel-debugbar
### 安装
composer require barryvdh/laravel-debugbar --dev
### 生成配置文件 config/debugbar.php
php artisan vendor:publish --provider="Barryvdh\Debugbar\ServiceProvider"
### 修改配置文件,设置 enabled 项
'enabled' => env('APP_DEBUG', false)
启用分析器后,网站底部会出现 debug 工具栏,可以看到执行的 mysql 语句等。可以发现和解决不合理的 ORM 问题。
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,
}
}
]
}
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
这里就建一个 ts 的,使用 sass 的 vue3.x 项目,使用手动选择模式,包管理工具使用 yarn 。一路选择和回车即可:
vue create -m yarn zeipan
? Please pick a preset:
Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
❯ Manually select features
? 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
? 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
? 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