Vue 项目创建基础配置

Posted 2023-02-28

参考技术A Vue 项目创建时候的一些基础配置小记：
CLI 即 @vue/cli 全局安装的 npm 包用于终端提供 vue 相关的指令，可用来创建工程、启动服务等；
CLI service 即 @vue/cli-service 开发环境的依赖，构建于 webpack 和 webpack-dev-server，可用来serve 启服务、编译构建 build 工程、配置 css、配置 webpack 等；
CLI 插件可以集成一些架包快速配置项目等；

项目创建，cd 到指定的目录下，执行

创建项目 create 后会有几个配置选项，具体如下：

1.use history mode for router - Y
即 vue-router 利用浏览器自身的 hash 模式和 history 模式特性实现前端路由
其中 hash 模式浏览器 url 地址中会带有 # 号，而history 则利用 html5 的 history interface 中新增的 pushState 和 replaceState 方法

2.Pick a CSS pre-processor - stylus
SCSS/SASS：scss 是 sass3 的新语法，完全兼容css3 且继承于 sass；sass 需 ruby环境，在服务端处理
LESS：借助 node.js 通过编译处理输出 css 至浏览器，同时兼容客户端与服务端运行
Stylus：用于给 node 项目进行 css 预处理支持，stylus 功能上更加强壮和 js 关系更加紧密

3.Pick a linter / formatter config - ESLint + Prettier
ESLint with error prevention only: 仅错误预防
ESLint + Airbnb config
ESLint + Standard config: 标准模式
ESLint + Prettier: 使用较多，推荐

4.Pick additional lint features - Lint on save
(·) Lint on save：保存即检查
( ) Lint and fix on commit： fix 和 commit 的时候才检查

5.Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys) - In dedicated config files
In dedicated config files：独立文件中放置
In package.json：放在 package.json 中

6.Save this as a preset for future projects - N
是否记录本次创建工程的如上配置选项并起个名称

安装时可能需要的一些资源： nodejs 、 Homebrew

以上便是此次分享的全部内容，希望能对大家有所帮助！