Vue.js 学习笔记十二：Vue CLI 之创建一个项目

最新推荐文章于 2024-05-12 03:26:02 发布
最新推荐文章于 2024-05-12 03:26:02 发布
阅读量8.8k 收藏 82
点赞数 18
分类专栏： Vue.js 学习笔记 文章标签： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27875933/article/details/117434093
版权

目录

创建一个项目

创建一个项目

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

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 // 项目的说明文档

 

 

 

stary1993
关注
  • 18
    点赞
  • 踩
  • 82
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
vue新建一个项目
weixin_46686024的博客
08-31 6095
nodejs.cn的安装 判断是否安装好 node -v（检查版本号） npm -v （检查是否安装npm） npm淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org（如果没有安装淘宝镜像，后面的吗命令把cnpm换成npm） 创建vue项目 1、cnpm install -g @vue/cli 2、vue create my-project 按键盘上下键选择默认（default）还是手动（Manually），如果选择defa
前端开发3年了，竟然不知道什么是 Vue 脚手架？（下）
前端人的博客
10-09 166
上一篇文章《前端开发3年了，竟然不知道什么是 Vue 脚手架？（上）》介绍了什么是脚手架，以及Vue-cli 2.x如何创建项目，创建的项目结构。这篇文章介绍 Vue-cli 3.x 如何构建项目？ 一、Vue-cli 2 与 Vue-cli 3的区别 vue-cli 3 是基于 webpack 4 打造的，vue-cli 2 还是 webpack 3。 vue-cli 3 的设计原则是 “0配置”，移除 build 和 config 等配置目录。 vue-cli 3 提供了 vue ui 命令，提
2024年Web前端最新前端开发3年了，竟然不知道什么是 Vue 脚手架？（下），2024年最新高级web前端面试答案解析
最新发布
2401_84619342的博客
05-12 993
疯狂编程学习效果可视化写博客阅读优秀代码心态调整方框内提示我们发现有可用新版本脚手架，可以运行下边命令进行更新。下边有三个选项，分别为：Please pick a preset:(Use arrow keys) - 请选择一个已配置的关键字选项default (babel,eslint) - 默认的，选babel和eslint包Manually select features - 手动选择需要的特性2.2、选择最后一个手动配置选择之后，如上图。
Vue.js - 05 使用 Vue CLI 新建项目，基于 Vue.js 2.x
qq_29761395的博客
06-05 252
Ubuntu 版本信息： Node.js 和 NPM 版本信息： VS Code 版本信息： 安装 Element 未安装 Element 之前，原 package.json 文件： 在终端输入 命令，安装 Element： 安装完成之后，package.json 文件，可见多了 Element 的依赖（第 12 行）： 使用 Element 引入 在项目中引入 Element，编辑 src/main.js 文件，添加第 2、3、7 行代码： 以上代码便完成了 Element 的引入。需要注意的是，样式文
vue 创建项目
Beloved_Jodie的博客
06-18 503
vue3
Vue 脚手架创建项目
weixin_47672177的博客
10-05 1326
脚手架创建项目操作流程
webpack4+vue3.0+element-plus创建基于vue3的项目
Mr_XiMu的博客
01-15 3316
webpack4+vue3.0+element-plus创建基于vue3的项目
Vue学习.pdf（Vue学习个人笔记资料-菜鸟入门）
11-20
Vue.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发，于2014年发布。它以简单易学和高效为核心，适用于构建复杂且响应式的用户界面。Vue的特点在于其渐进式架构，允许开发者逐步将Vue融入现有的项目中，而不必...
Vue学习笔记进阶篇之vue-cli安装及介绍
12-08
Vue-cli是Vue的脚手架工具 主要作用：目录结构、本地调试、代码部署、热加载、单元测试 地址：https://github.com/vuejs/vue-cli 安装 全局安装vue-cli npm install -g vue-cli 当然了，要想使用npm工具，就必须...
vue 3.0学习笔记(从入门到精通)
10-07
接着，使用`npm init vite@latest project --template vue`来创建一个新的Vite项目，并进入项目目录执行`npm install`安装依赖，最后运行`npm run dev`启动开发服务器。 Visual Studio Code (VSCode)是一款非常受...
vue学习笔记，B站黑马程序员的javaweb
11-05
Vue CLI是一个基于Vue的命令行界面工具，用于快速创建Vue项目。使用Vue CLI，可以快速生成Vue项目的基本结构。 例如，使用以下命令创建一个新的Vue项目： ``` vue create my-project ``` 这个命令将创建一个名为...
vue项目的创建命令选取&ESLint的安装命令选取
qq_45426187的博客
02-27 564
6.Pick a linter/formatter config 选择 ESLint + Prettier(最下面的)target:'http://localhost:8081', //代理目标的基础路径 真实请求路径。config.headers.Authorization = token // 设置请求头。//匹配所有以 '/api'开头的请求路径。2.等待跳出选项, 选择 //手动选择功能。
vue项目搭建
qq_32586679的博客
12-01 277
1.node.js安装: node -v 查看版本 2.vue-cli安装: 低版本先移除，再全局安装新版本 vue -V(版本) 3.版本初始化： vue create name 4.选择初始化配置： Default是自动安装，Manually是手动安装 5.添加配置项： *Babel：使用babel，便于将我们源代码进行转码（把es6=>es5） ...
Vue（八）vue脚手架
qd520_1314的博客
04-25 2014
a.先决定要把项目文件夹保存在哪个位置； b.然后在整个文件夹的位置，shift+鼠标右键打开power shell窗口，运行：vue create 自定义项目名；系统出现提示后按照以下过程进行选择： 1）? Please pick a preset: Default ([Vue 2] babel, eslint) Default (Vue 3) ([Vue 3] babel, eslint) > Manually select features 2）? Check the
Vue2.0教程 （一） vue脚手架安装
燃燃的大尾巴
07-25 633
vue2脚手架
vue-router 的使用与基础篇解析
黑山老妖的小站
07-23 1576
开篇 源码仓库为：https://gitee.com/wx_142da4773a/vue-router-demo.git 基础篇 起步 可以自己创建项目也可以从我的gitee上拉取代码进行练习~ 我采用了vue create 来创建项目并选择了router特性。选择过程会询问以下问题 vue create vue-router-demo 创建一个vue项目 请选择预置Please pick a preset: (Use arrow keys) default (babel, eslint) Manua
vue3.0学习笔记
SunGrowing的博客
10-30 554
小记组件实例和应用实例生命周期模板语法与2.X相同的功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 组件实例和应用实例 应用实例 const app = Vue.createApp({ /* options */ }) 可链式 V
@vue/cli4--使用命令创建项目--方法/实例
IT利刃出鞘的博客
06-24 788
本文用实例来介绍vue-cli4如何使用命令来创建项目
vue3 @/cli脚手架搭建项目
影子
08-22 288
创建一个工作目录： 按住shift键，右键此工作目录打开powershell窗口 (s) 输入：start cmd就进入到cmd下面 输入命令：vue create 项目名称 然后按回车！ 进入预设，按方向键向下选择，最后按回车 Vue CLI v4.5.13 ? Please pick a preset: (Use arrow keys) > Default ([Vue 2] babel, eslint) //这个是vue2.x Defaul...
ERROR Error loading vue.config.js: ERROR TypeError: defineConfig is not a function
12-27
根据提供的引用内容，出现"ERROR Error loading vue.config.js: ERROR TypeError: defineConfig is not a function"错误是因为在vue.config.js文件中使用了defineConfig函数，但该函数未定义或未导入。 为了解决这个问题，你需要确保正确导入defineConfig函数。根据引用中的代码，可以看到defineConfig函数是从'@vue/cli-service'模块中导入的。因此，你需要确保已经安装了'@vue/cli-service'模块，并正确导入defineConfig函数。 以下是一个示例，展示了如何正确导入defineConfig函数并使用它来配置vue-cli项目： ```javascript const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ // 在这里进行其他配置 transpileDependencies: true, devServer: { port: 8081 } }) ``` 请确保按照上述示例正确导入defineConfig函数，并根据你的项目需求进行其他配置。如果仍然遇到问题，请检查是否正确安装了'@vue/cli-service'模块，并确保该模块的版本与你的项目兼容。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

stary1993

你的鼓励是我创作的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值