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。 会有一些变化。请看：
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
https://github.com/qingqingxuan/admin-work
https://www.naiveui.com/zh-CN/os-theme/docs/community
https://primefaces.org/primevue/
vue3 + ts + vite
丢掉 vue2 丢掉 js 丢掉 webpack
当然 react 栈另说
在使用 <style scoped>，我们可以保护其他元素不受该样式的影响。如果我们附加动态元素，我们应该使用 parent-class /deep/ current-class。 但是我如何通过SCSS使用它呢：
<style scoped lang="scss">
::v-deep .frame {
}
</style>
# 新增一个 index 参数（方便浏览器刷新）
const value = 3
this.$router.push({
path: this.$route.path,
query: { ...this.$route.query, index: value }
})
安装 node.js
下载 LTS 的即可。配置环境变量
常用命令：
node -v
npm -v
# 设置镜像
sudo npm install -g cnpm --registry="https://registry.npm.taobao.org"
# 安装 yarn
sudo npm install -g yarn
# 设置镜像
yarn config set registry https://registry.npm.taobao.org --global
# 安装 vue cli
yarn global add @vue/cli
# 会让你选择 vue 的版本
vue create test
创建的 vue 项目的时候，目录里是没有 vue.config.js 文件的，我们需要手动加入。
在根目录下创建以下三个文件。
– src/settings.js
– .env.development
– .env.production
– vue.config.js
然后，填充内容。请参考：https://blog.vini123.com/525
yarn add vue-router
yarn add vuex
yarn add axios
yarn add js-cookie
https://blog.csdn.net/weixin_43974265/article/details/114181405
先安装
yarn add element-china-area-data
然后在 code 中
<el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange">
import { regionData , CodeToText } from "element-china-area-data";
handleChange() {
var loc = "";
for (let i = 0; i < this.selectedOptions.length; i++) {
loc += CodeToText[this.selectedOptions[i]];
}
alert(loc);
}