「这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战」。
前言
本系列文章将带你从0搭建一个脚手架项目。并使用webpack对项目进行打包及优化。如果文章有不足的地方,恳请各位积极指出。
话不多说，上干货~~~~
使用vue-cli4创建项目
在创建vue-cli4项目前 检查当前电脑是否有安装vue-cli。我电脑安装的vue-cli版本号是2.6.3版本的,因此需要将全局vue-cli版本进行升级。这里有一个坑。就是卸载全局的vue-cli2没有效果。如果出现无法卸载或更新的情况，可以在电脑环境变量中的系统变量处重新添加新的系统变量。
重新设置npm的默认安装路径:
//设置npm的安装路径前缀
npm config set prefix "D:\nodejs"
//可以自定义一下缓存路径 也可以不定义
npm config set cache "D:\nodejs\node_cache"
//然后重新卸载vue-cli2
npm uni vue-cli -g
//清理缓存
npm cache clean --force
//重新安装vue-cli3
npm i -g @vue/cli
如果还是无法安装的话 启动究极大法~~~ 卸载node.js 并清理掉有关npm和node的文件夹 重新再安装一次node。
安装完成后 我们可以看下此时的vue-cli的版本
//windows命令输入
vue --version
项目创建时的基础配置
开始创建项目vue-cli4
打开cmd 输入命令
vue create '项目名称'
如果出现以下信息则代表vue-cli安装成功了
如果出现 'vue 不是内部或外部命令，也不是可运行的程序'
那么可能是你的vue-cli不是全局安装的。 此时你需要重新安装vue-cli为全局版本 我这里就不再过多的赘述了
此时项目并没有创建完成,我们还需要进行项目的一些基础配置
- 选项一 默认创建只包含 babel 和eslint 的项目
- 选项二 自定义挑选需要的功能配置
选项一中只默认安装了babel和eslint 这些显然是不太够的。我们选择选项二：自定义选择配置项
如上图 我们看到有较多的选项 我司目前项目用到了 babel Router Vuex CSS-pre Linter 所以我们可以选择安装这些
Router模式选择
选择了Router 那么会让我们选择Router的模式 是否选择 history 模式 有关Router的history 模式和 hash模式 下次有机会再出一篇相关文章
这里我们选择使用 history 模式
CSS预处理语言选择
选择了CSS 预处理之后会有三个选项
- 选项一 使用 dart-sass
- 选项二 使用 node-sass
- 选项三 使用 less
- 选项四 使用 stylus
注意:dart-sass(还未编译过的Sass) 和 node-sass(编译之后的Sass) 都是 Sass。 dart-sass是 Sass的主要实现。 Sass的一些新的功能都会先经过dart-sass进行验证。之后再推向其他版本。由于dart-sass是未编译且不稳定的Sass版本。因此一般都会选择node-sass
上面几种预处理的CSS 其实用起来都差不多。 使用较多的应该是node-sass和 Stylus。这里挑选自己喜欢的预处理CSS即可。
Eslint语法校验
选择了Linter 那么会让我们选择 lint的语法配置
-
选项一 仅进行错误预防的处理
-
选项二 遵循爱彼迎的语法配置
-
选项三 eslint标准语法配置
-
选项四 使用Prettier(一种前端标准化的代码管理)的这种语法配置
我们这里 选择标准的eslint 语法。
选择完成后 会出选两个选项 如下代码:
//保存代码时 就进行语法检测
lint on save
//fix和commit 的时候进行检测
lint and fix on commit
这里我们选择 lint on save
上图所示的是:前面选择的babel和eslint的配置文件是单独作为一个文件还是 直接配置在package.json中
为了更加熟悉项目结构 我们选择单独的配置文件。
选择完了之后 会在询问我们是否保存当前的项目配置作为之后的预处理方案的项目 这里我们可以选择保存也可以选择不保存。
基础项目完成
至此 基础项目配置已经完成。 开始生成项目目录以及下载各种依赖包。
看到以上的信息 则表示项目创建成功了。
最后
文章若有不足之处，还请大家批评指出。
感谢您观看此篇文章 希望能给个👍评论收藏三连！你的点赞就是我写作的动力。
