cli4.0快速搭建一个项目的方法步骤

最近公司的项目终于到了空闲期,而闲不住的我终于把目标放到了项目的迁移上面

因为公司的项目比较早的原因(虽然当时vue-cli也出来了一段时间,但是不敢轻易尝试啊!)

所以使用的环境还是 vue2.x 版本的,而又因为公司的前端项目都是我来搭建的原因(并不是技术大佬,入职早!)

所以所有项目开发的时候一直在用的 vue-cli2.0,后来项目多了也没时间就没往 vue-cli3.0 迁移

现在终于到了空闲期,可以尝试着慢慢迁移了

本篇文章就是主要记录迁移的过程和 vue-cli3.0 的搭建过程

一、升级本地环境

因为 vue-cli3.0 要 nodeJs ≧ 8.9(官方推荐 8.11.0+),所以我们先去 官网下载 一个稳定的新版本覆盖本地版本

我安装的是 node12.13.0 版本,因为之前我本地全局安装了 2.0 的环境,所以需要全局卸载再安装 3.0

npm uninstall -g vue-cli npm install -g @vue/cli

安装好了之后输入 vue -V 查看版本

我我我草!!!最近只顾着看技术了,没发现10月16日官方已经宣布 vue-cli4.0 已经正式发布了!!!

有没有搞错,我 vue-cli3.0 还没来得及用上呢!还好看了下文档,除了跟 vue-cli3.0 的目录有点变化其他没变。

那就直接开始搞 vue-cli4.0 吧!

二、搭建项目

vue-cli3.0 以后项目创建的命令变成了下面这样

vue create <Project Name> //文件名 不支持驼峰(含大写字母)

竟然还被嫌弃了我的网速,我还就不用 cnpm 了!

选择不使用淘宝镜像后,选择手动配置

default 是使用默认配置

Manually select features 是自定义配置

我的自定义配置如下

cli4.0快速搭建一个项目的方法步骤

选择是否使用路由 history router,其实直白来说就是是否路径带 # 号,建议选择 N,否则服务器还要进行配置

css 的预处理器我选择的是 Sass/SCSS(with dart-sass) 。node-sass是自动编译实时的,dart-sass需要保存后才会生效

sass 官方目前主力推 dart-sass 最新的特性都会在这个上面先实现

cli4.0快速搭建一个项目的方法步骤

选择 ESLint 代码校验规则,提供一个插件化的javascript代码检测工具,ESLint + Prettier 使用较多

cli4.0快速搭建一个项目的方法步骤

然后选择什么时候进行代码校验,Lint on save 保存就检查,Lint and fix on commit fix 或者 commit 的时候检查,建议第一个

下面就是如何存放配置了,In dedicated config files 存放到独立文件中,In package.json 存放到 package.json 中

本着项目结构简单的想法,我选择了第二个

cli4.0快速搭建一个项目的方法步骤

最后就是是否保存本次的配置了,N 不记录,如果选择 Y 需要输入保存名字

我这里就不保存了,原因是熟能生巧!哈哈哈

cli4.0快速搭建一个项目的方法步骤

然后就等待创建项目吧

cli4.0快速搭建一个项目的方法步骤

出现如图红框所示的提示,就搭建成功,进入项目目录,直接输入 npm run serve 就可以了

cli4.0快速搭建一个项目的方法步骤

你以为这样就完了吗?我也是这样认为的,可它不是这样的!

cli4.0快速搭建一个项目的方法步骤

很明显,虽然项目能够正常启动,但是我的 nodeJs 版本用的太高了,然后我给回退到了 11.11.0 版本

虽然没影响太大的影响,但是我不想看见 WARN!回退之后,重新跑项目就不会有问题了。

cli4.0快速搭建一个项目的方法步骤

三、环境配置

下面就是关于项目的环境配置了,我这边一般喜欢用 test、preview、production分别表示测试,预览,生产三种环境

修改 package.json 文件如下

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/78a197be154aa831e632d7864ec70682.html