浅谈vue

网友投稿 267 2023-02-09


浅谈vue

最近项目正在优化。乘着有时间看了一下 vue-cli3.0.x 使用 。感觉还蛮不错的。 因为之前项目使用的 vue-cli 2 创建的,强行使用 eslint让我们很难受,一些与项目无关的 “build” 和 “config” ,让人看着就有一些不爽 。由于公司环境比较多,需要测试环境的配置。增加了 “”tt”: “node build/tt-build.js”” 。到 3.0.x 应该怎么用? 带着这些问题来看 3.0.x 感觉就好多了。

1. 官网资料

在学习技术的时候,经常看查看官网的资料。因为那里的资料更新是最快的 。

vue-cli

vue-cli 文档

2. 安装环境

这里犸特头,推荐大家使用 npm install -g @vue/cli ,通过 yarn global addhttp:// @vue/cli 还需要进行其他设置,还生成一些文件删除几分LYnFCBZ钟。

npm install -g @vue/cli

# or

yarn global add @vue/cli

# 使用vue命令,创建项目(不同于cli2.0的init,create)

vue create my-project

如果 您使用 yarn global add @vue/cli 安装需要 进入 目录 。执行

yarn // 安装项目依赖

cd packages/@vue/cli // 目录

yarn link //添加 link `vue` 执行指命 。

vue create my-project // 创建项目 。

3. 多环境配置

因为公司有 开发环境 ,测试环境,联调环境,线上环境 。减少人为配置,一次配置对原则。所以在2.0.x 增加了“package.json “tt”: “node build/tt-build.js”” 类型的配置,配置不了不少文件。 在 vue-http://cli 3.0.x 里面支持 “.env” 文件配置 ,我这里增加 “.env.development” , “.env.production”和“.env.test” 配置 。

1. 基本对应和默认

development is used by vue-cli-service serve

production is used by vue-cli-service build

test is used by vue-cli-service test

2. 指定配置启动

增加其他配置,需要下面指定配置 。

"dev-build": "vue-cli-service build --mode development",

3.”.env “配置文件编写

配置文件内容格式如下 ,

VUE_APP_*

例如:”.env.production” 内容如下

VUE_APP_MOCK_URL = 'https://xxx.xxx.xxx/restapi/'

4. 调整用环境配置

console.log(process.env.VUE_APP_MOCK_URL);

process.env.NODE_ENV // 特定

BASE_URL // vue.config.js 配置


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:spring mvc中直接注入的HttpServletRequst安全吗
下一篇:node结合swig渲染摸板的方法
相关文章

 发表评论

暂时没有评论,来抢沙发吧~