千锋教育-做有情怀、有良心、有品质的职业教育机构

手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

当前位置:首页  >  技术干货  > vue-cli4.x构建项目

vue-cli4.x构建项目

来源:千锋教育
发布人:syq
时间: 2022-08-11 14:43:00 1660200180

  vue-cli是基于webpack 构建vue自动化开发环境的脚手架。

  啥是脚手架?

  虽然大家没有在建筑工地上搬过砖,但是肯定都见过农民工兄弟在建造大楼前,先通过钢管结构,搭建起大楼的框架吧。

vue-cli4.x构建项目

  对,如果我们写的项目是一栋大厦的话,那么vuecli就是,勤劳的农民工兄弟,帮我们在写项目前,把项目的基础结构搭建起来。好啦,接下来我们看看vue-cli4.x构建项目如何使用吧。

  一、安装

  在 cmd中 输入以下命令安装

21

  静静等待安装成功后在控制台中输入

  以下命令,验证是否安装成功

  vue --version

  如果出现版本号,恭喜你安装成功了,可以愉快的玩耍了!

  二、启动项目

  在合适的位置,打开cmd,输入

22

  回车之后

vue-cli4.x构建项目425

  让我们选择两个预设:default默认的,只有babel和讨厌的eslint,显然满足不了我们的需求,我们选择Manually select features 自定义选择我们需要的配置。

  我们选择的配置如下:

vue-cli4.x构建项目530

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

vue-cli4.x构建项目593

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

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

vue-cli4.x构建项目713

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

vue-cli4.x构建项目780

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

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

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

vue-cli4.x构建项目967

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

vue-cli4.x构建项目1027

  然后就等待创建项目吧

vue-cli4.x构建项目1040

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

vue-cli4.x构建项目1091

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

vue-cli4.x构建项目1121

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

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

vue-cli4.x构建项目1221

  三、目录结构

  接下来我们看看脚手架替我们生成了哪些文件吧。

23

  四、环境配置

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

  修改 package.json 文件如下

24

  在项目根目录下新建 .env.test、.env.preview、 .env.production 文件,分别对应三个环境的配置文件,注意,名字要与 --mode 后面的名字分别对应

  .env.test 代码如下

25

  .env.pre 代码如下

26

  .env.prod 代码如下

27

  ok,这样环境就配置好了,分别用以下命令来打包不同环境的包就可以了

28

  另外需要说明一点的是,本地环境会默认从 .env.development 文件中读取配置

  所以记得有需要记得新建一个然后存放配置

  我的 .env.development 代码如下

29

  五、项目配置

  从 vue-cli3.0 开始 build 和 config 目录就取消了,如果需要修改配置,可以在项目的根目录新建一个 vue.config.js 文件来覆盖项目的配置,因为项目的配置比较多,下面简单列举常用的配置

30

  更多关于前端培训的问题,欢迎咨询千锋教育在线名师,如果想要了解我们的师资、课程、项目实操的话可以点击咨询课程顾问,获取试听资格来试听我们的课程,在线零距离接触千锋教育大咖名师,让你轻松从入门到精通。

  注:本文部分文字和图片来源于网络,如有侵权,请联系删除。版权归原作者所有!

tags:
声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。
10年以上业内强师集结,手把手带你蜕变精英
请您保持通讯畅通,专属学习老师24小时内将与您1V1沟通
免费领取
今日已有369人领取成功
刘同学 138****2860 刚刚成功领取
王同学 131****2015 刚刚成功领取
张同学 133****4652 刚刚成功领取
李同学 135****8607 刚刚成功领取
杨同学 132****5667 刚刚成功领取
岳同学 134****6652 刚刚成功领取
梁同学 157****2950 刚刚成功领取
刘同学 189****1015 刚刚成功领取
张同学 155****4678 刚刚成功领取
邹同学 139****2907 刚刚成功领取
董同学 138****2867 刚刚成功领取
周同学 136****3602 刚刚成功领取
相关推荐HOT