Vue 项目创建基础配置

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

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

vue create xxxx // xxxx 即项目名称 project-name

创建项目 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
是否记录本次创建工程的如上配置选项并起个名称

安装时可能需要的一些资源:nodejsHomebrew


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

推荐阅读更多精彩内容