搭建vue框架(一)：创建项目

最新推荐文章于 2025-10-21 18:06:16 发布

原创最新推荐文章于 2025-10-21 18:06:16 发布 · 286 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了使用Vue CLI创建项目的全过程，包括安装Vue CLI、创建项目、选择Babel、Router、Vuex、CSS预处理器、Linter等配置，以及如何设置history模式和选择dart-sass作为CSS预处理器的理由。

搭建vue框架

安装vue-cli

npm install -g @vue/cli

创建项目

vue create vue-demo

选择配置

Please pick a preset: Manually select features --选择Manually

 Check the features needed for your project
 选择 Babel, Router, Vuex, CSS Pre-processors, Linter

Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) --Y

history和hash模式的官网说明

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
> Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
  Stylus

选dart-sass 原因参考:

https://www.dart-china.org/t/css-sass-dart-sass/146
node-sass 的安装很麻烦，经常会出问题，导致安装失败等

 Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

选ESLint + Standard config

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save  // 保存时检测
 ( ) Lint and fix on commit  // commit时检测

选择Lint on save

Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

选In dedicated config files