5月
08
升级 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
? 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
5月
03
3月
25
在使用 <style scoped>，我们可以保护其他元素不受该样式的影响。如果我们附加动态元素，我们应该使用 parent-class /deep/ current-class。 但是我如何通过SCSS使用它呢：
<style scoped lang="scss">
::v-deep .frame {
}
</style>
3月
14
# 新增一个 index 参数（方便浏览器刷新）
const value = 3
this.$router.push({
path: this.$route.path,
query: { ...this.$route.query, index: value }
})
1月
24
准备
安装 node.js
https://nodejs.org/en/
下载 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 cli
安装初始化 vue 项目
# 会让你选择 vue 的版本
vue create test
基本配置
创建的 vue 项目的时候，目录里是没有 vue.config.js 文件的，我们需要手动加入。
在根目录下创建以下三个文件。
– src/settings.js
– .env.development
– .env.production
– vue.config.js
然后，填充内容。请参考：https://blog.vini123.com/525
安装 vue-router 以及 vuex
yarn add vue-router
yarn add vuex
yarn add axios
yarn add js-cookie
https://blog.csdn.net/weixin_43974265/article/details/114181405
8月
21
操作一波
先安装
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);
}
8月
01
在 uniapp 中，如果 view 定义了 display:flex ，那么 v-show 就无效了。也就是总是 true，总是会显示出来。
12月
28
vue cli 配置 dev 的 host 和端口号
# vue.config.js 中
module.exports = {
devServer: {
port: 80, // 端口号，如果端口号被占用，会自动加1
host: "sky.cn", //主机名， 127.0.0.1， 真机 0.0.0.0
https: false, //协议
open: true //启动服务时自动打开浏览器访问
},
可是当： npm run dev 的时候，端口号却是 1024。 话说 mac 下启动 1024 以下的端口需要 root 权限。用 sudo 试试。
sudo npm run dev
当然，仅仅上边是不可以的。我们要修改 host，映射一下。
# mac 下
sudo vim /etc/hosts
# 增加
127.0.0.1 sky.cn
# windows 下
win + r -> drivers -> cd etc -> vim hosts
# 增加
127.0.0.1 sky.cn
这样，service 结果
App running at:
- Local: http://sky.cn:80/
- Network: http://sky.cn:80/
Note that the development build is not optimized.
To create a production build, run npm run build.
优化
这个配置硬写在 vue.config.js 中。这样不好看。我们写在环境配置中。在 .env.development 中，新增配置：
# 配置 service 的域名
VUE_APP_HOST = 'sky.cn'
# 配置 service 的端口号
VUE_APP_PORT = '80'
然后，在 vue.config.js 中这样修改：
const host = process.env.host || process.env.VUE_APP_HOST || '127.0.0.1'
const port = process.env.port || process.env.VUE_APP_PORT || process.env.npm_config_port || 80
module.exports = {
devServer: {
host: host, //主机名， 127.0.0.1， 真机 0.0.0.0
port: port, // 端口号，如果端口号被占用，会自动加1
https: false, //协议
open: true, //启动服务时自动打开浏览器访问
overlay: {
warnings: false,
errors: true
},
before: ''
},
…
环境变量一说可以参考这里：https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F
