目录

创建一个项目


创建一个项目

运行以下命令来创建一个新项目:

vue create vuecli-demo

你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset,也可以选“手动选择特性”(使用↑ ↓箭头切换,Enter 确认)来选取需要的特性。

Vue CLI v4.5.12
? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint) // (使用 vue 2 默认的配置,会安装babel和eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint) // (使用 vue 3 默认的配置,会安装babel和eslint)
  Manually select features // (手动配置)

这个默认的设置非常适合快速创建一个新项目的原型,而手动设置(通过↑ ↓ 箭头选择你要配置的项,按 空格 是选中,按 a 是全选,按 i 是反选)则提供了更多的选项,它们是面向生产的项目更加需要的。

手动配置选项说明

序号选项描述默认选择
1Choose Vue version选择 Vue 版本,目前 Vue 2 和 Vue 3 两个版本。Y
2Babelvue项目中普遍使用 es6 语法,但有时我们的项目需要兼容低版本浏览器,这时就需要引入babel插件,将 es6 转成 es5。Y
3TypeScriptTypeScript 通过添加类型来扩展 JavaScript。通过了解 JavaScript,TypeScript 可以节省您捕获错误的时间并在运行代码之前提供修复。任何浏览器,任何操作系统,任何运行 JavaScript 的地方。 完全开源。 
4Progressive Web App (PWA) Support渐进式Web应用程序(PWA)支持。 
5RouterVue Router 路由。 
6VuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 
7CSS Pre-processorsCSS预处理器,预处理器:比如要用 sass 或者 cssNext 就要按照人家规定的语法形式,就是用人家的语法去编写,然后人家把你编写的代码转成 css。 
8Linter / Formatter格式化程序。Y
9Unit Testing单元测试。 
10E2E Testing端到端(end-to-end)。 

向上向下箭头控制方向,空格进行选中,可选择如下配置,引入 Router 和 vuex 以及 CSS预处理器 (这里为了下面介绍目录结构,后续再学习)

Vue CLI v4.5.12
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

选择完成回车即可。

? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x
  3.x (Preview)

选择 Vue 版本。这里选择 2.x,即直接选择回车即可。

? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

选择是否使用历史模式,此处建议选择不使用,即输入 n,选择使用 hash 模式。

? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
  Stylus

选择 CSS 预处理器。node-sass 是自动编译实时的,dart-sass 需要保存后才会生效,此处建议选择 Sass/SCSS(with dart-sass),即直接选择回车即可。

? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

选择 eslint 校验规则。此处建议选择默认配置,即直接回车即可。

? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit

选择什么时候进行代码校验。Lint on save 保存时检查, Lint and fix on commit 提交时检查,此处建议选择第一个,即直接回车即可。

? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Basic
? Pick additional lint features: 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 存放到独立文件中,In package.json 存放到 package.json 中,此处建议选择第二个配置,即存放到 package.json 文件中。

? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? (y/N)

选择是否保存本次配置。建议选择 N,即不保存,否则以后创建项目修改不配置不太方便。

等待项目创建。

Vue CLI v4.5.12
✨  Creating project in E:\workspace\stary\HBuilder\hdemo\vuecli-demo01.
�  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

[ .................] | fetchMetadata: sill pacote range manifest for string_decoder@^1.0.0 fetched in 117ms

如果你决定保存本次配置,命名该配置名称,比如:vuecli-demo,并回车确认。

? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? Yes
? Save preset as: vuecli-demo

当你下次创建项目时,就会显示你保存的 preset 可供选择。

Vue CLI v4.5.12
? Please pick a preset: (Use arrow keys)
> vuecli-demo ([Vue 2] dart-sass, babel, router, vuex, eslint)
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
  Manually select features

一个 Vue CLI preset 是一个包含创建新项目所需预定义选项和插件的 JSON 对象,让用户无需在命令提示中选择它们。

vue create 过程中保存的 preset 会被放在你的 home 目录下的一个配置文件中 (~/.vuerc)。你可以通过直接编辑这个文件来调整、添加、删除保存好的 preset。

这里是上一步创建的名为 vuecli-demo preset 的示例:

{
  "useTaobaoRegistry": true,
  "presets": {
    "vuecli-demo": {
      "useConfigFiles": true,
      "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-router": {
          "historyMode": false
        },
        "@vue/cli-plugin-vuex": {},
        "@vue/cli-plugin-eslint": {
          "config": "base",
          "lintOn": [
            "save"
          ]
        }
      },
      "vueVersion": "2",
      "cssPreprocessor": "dart-sass"
    }
  }
}

Preset 的数据会被插件生成器用来生成相应的项目文件。除了上述这些字段,你也可以为集成工具添加配置:

{
  "useConfigFiles": true,
  "plugins": {...},
  "configs": {
    "vue": {...},
    "postcss": {...},
    "eslintConfig": {...},
    "jest": {...}
  }
}

这些额外的配置将会根据 useConfigFiles 的值被合并到 package.json 或相应的配置文件中。例如,当 "useConfigFiles": true 的时候,configs 的值将会被合并到 vue.config.js 中。

项目目录结构

vuecli-demo
  |- dist // 打包后的目录,当执行打包命令后,自动生成该目录。
  |- node_modules // 第三方依赖,我们安装的各种依赖都在这个目录里面
  |- public // 存放公共资源的地方 比如 json 文件,里面有一个入口 html 页面
  |- /src // 这个是重点,我们的源码以及开发的静态资源等都在里面
    |- assets // 资源文件(字体,图标,图片)
    |- components // 自定义的公共组件
    |- router // 路由配置
    |- store // 存放 vuex 状态管理
    |- views  // 存放页面
    |- App.vue // 首页组件(默认组件),也叫根组件
    |- main.js // 项目执行的入口 js   
  |- babel.config.js // babel 配置文件
  |- package.json // node 配置依赖文件
  |- package-lock.json // 版本管理使用的文件
  |- README.md // 项目的说明文档   

 

 

 

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐