使用vue-cli创建Vue2自定义项目步骤

已于 2023-11-08 16:38:13 修改
阅读量335 收藏
点赞数 2
文章标签： vue.js 前端 javascript vue
于 2023-11-08 16:16:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59250071/article/details/134288913
版权

标题Vue CLI介绍

Vue CLI 是 Vue 官方提供的一个全局命令工具。

可以帮助我们快速创建一个开发 Vue 项目的标准化基础架子。【集成了 webpack 配置】

好处：

1.开箱即用，零配置

2.内置 babel 等工具

3.标准化

使用步骤

1.全局安装 (一次) ：

yarn global add @vue/cli 
或
npm i @vue/cli -g

2.查看 Vue 版本：

vue --version

3.创建项目架子：

vue create  项目名称(project-name)
（项目名-不能用中文）

4.创建选项(选择Manually select features)

在这里插入图片描述

? Please pick a preset: (Use arrow keys)
  Default ([Vue 3] babel, eslint) //默认配置(创建Vue 3项目，默认配置 babel 和eslint)
  Default ([Vue 2] babel, eslint) //默认配置(创建Vue 2项目，默认配置 babel 和eslint)
> Manually select features	//手动选择配置

5.手动选择功能（根据需求选择）

在这里插入图片描述

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and
<enter> to proceed)
>(*) Babel	//es6转es3
 ( ) TypeScript		//是否开启TypeScript 支持
 ( ) Progressive Web App (PWA) Support	//是否支持渐进式 Web 应用程序（PWA）
 (*) Router	//是否启动路由
 ( ) Vuex	//是否启用 Vuex
 (*) CSS Pre-processors	//选择一种 CSS 预处理器 css/less
 (*) Linter / Formatter  //选择代码规范检查工具和代码格式化工具
 ( ) Unit Testing 	//单元测试工具
 ( ) E2E Testing 	//端到端测试工具

详细解释

Babel：Babel 是一个 JavaScript 编译器，用于将新版本的 JavaScript 代码转换为与旧版本兼容的代码，以便在不同浏览器中运行。选择 Babel 选项将启用 Babel 编译，以确保你的项目代码在各种环境中兼容。

TypeScript：TypeScript 是一种类型安全的 JavaScript 超集，它为 JavaScript 添加了静态类型检查。选择 TypeScript 选项将启用 TypeScript 支持，使你能够使用 TypeScript 编写项目代码，从而提供更严格的类型检查和智能提示。

Progressive Web App (PWA) Support : 允许你配置你的项目以支持渐进式 Web 应用程序（PWA）。PWA 是一种 Web 应用程序开发方法，旨在提供一种类似原生移动应用的用户体验，包括离线访问、推送通知等功能

Router：Vue Router 是 Vue.js 的官方路由管理库，用于构建单页应用程序的路由。选择 Router 选项将启用 Vue Router 并为你的项目配置路由功能。

Vuex：Vuex 是 Vue.js 的官方状态管理库，用于管理应用程序中的状态。选择 Vuex 选项将启用 Vuex 并为你的项目配置状态管理功能。

CSS Pre-processors：这个选项允许你选择一种 CSS 预处理器，如 Sass/SCSS、Less 或 Stylus，以便在项目中编写样式。预处理器允许你使用变量、嵌套规则等功能来更好地组织和维护样式。

Linter / Formatter：这个选项允许你选择代码规范检查工具和代码格式化工具。通常，你可以选择 ESLint 来进行代码规范检查，并选择 Prettier 进行代码格式化。这有助于确保代码质量和一致性。

Unit Testing 和 E2E Testing：这些选项允许你选择单元测试和端到端（E2E）测试工具，例如 Jest 和 Cypress，以确保你的应用程序的可靠性和稳定性。

6.选择vue的版本(选择2.x)

在这里插入图片描述

 ? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
   3.x 	//Vue 3
 > 2.x	//Vue 2

7.是否使用history模式(根据需求输入 y 或 n 选择)

在这里插入图片描述

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

Vue有两种常见的路由模式：哈希路由（Hash Mode）和历史路由（History Mode）。它们控制了Vue Router如何管理URL，并影响了用户在应用程序中导航时URL的显示方式。

哈希路由（Hash Mode）：

URL格式：在哈希路由中，URL会以 #字符后跟随一个哈希片段来表示路由，例如：http://localhost:8080/#/home。
特点：哈希路由将路由信息存储在URL的哈希部分，因此在每次路由切换时，浏览器不会向服务器发送请求，这意味着不会刷新整个页面。这是为单页应用（SPA）设计的常见路由方式。
优点：易于部署，不需要特殊服务器配置，兼容性好，可以在大多数环境中工作。
缺点：URL中包含#字符，不太美观；无法直接处理404错误，需要使用window.onhashchange事件来处理路由变化；不支持服务器端渲染（SSR）。

历史路由（History Mode）：

URL格式：历史路由使用普通的URL格式，没有#字符，例如： http://localhost:8080/home
特点：历史路由通过HTML5的history.pushState方法来改变URL，因此它更像是传统的多页应用程序。这允许你使用更干净、美观的URL，并且不需要#字符。
优点：URL更友好，不包含#字符，更符合用户期望；支持处理404错误；可以与服务器端渲染（SSR）结合使用。
缺点：需要服务器配置以处理路由；如果服务器未正确配置，刷新页面时可能会导致404错误；在某些环境下，需要特殊的基本路径配置。开发环境webpack给规避掉了history模式的问题。

怎么选

要选择哈希路由还是历史路由，通常取决于你的项目需求和服务器环境。如果你的应用是一个单页应用（SPA），并且不需要处理404错误，哈希路由可能是一个简单的选择。如果你需要更友好的URL，支持处理404错误，或者需要与服务器端渲染（SSR）一起使用，那么历史路由可能更适合。

8.选择css预处理（按照需求选择）

在这里插入图片描述

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

9.选择eslint代码规范的风格 (按照需求选择)

在这里插入图片描述

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

ESLint with error prevention only：这个选项会配置 ESLint，但只会进行代码规范检查，并不会格式化代码。它将检查代码中可能引发错误的部分，以确保你的代码质量，并遵循 JavaScript 代码规范。

ESLint + Airbnb config：选择此选项将配置 ESLint 并使用 Airbnb 的代码规范配置。Airbnb 规范是一种广泛采用的 JavaScript 代码规范，它包括了一系列规则和最佳实践，以确保代码质量和一致性。

ESLint + Standard config：这个选项配置 ESLint 并使用 Standard 规范（JavaScript Standard Style）。Standard 规范是另一种 JavaScript 代码规范，它强调简洁、一致和易于阅读的代码。

ESLint + Prettier：选择此选项将配置 ESLint 并集成 Prettier 代码格式化工具。这意味着除了进行代码规范检查，还会自动格式化你的代码，以确保它符合一致的代码风格。

怎么选

不同规范中规范检查和格式化程度不同。根据你的需求和团队约定，你可以选择适合你项目的选项。

10.选择eslint代码规范的风格 (可以直接回车)

在这里插入图片描述

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to
proceed)
>(*) Lint on save 	//保存时校验
 ( ) Lint and fix on commit	//提交代码到版本控制系统时校验

11.选择配置文件的生成方式 (可以直接回车)

在这里插入图片描述

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files	//配置文件生成到单独文件中
  In package.json		//将配置信息包含在项目的package.json

12.是否保存预设，下次直接使用(可选可不选 输入 y 或 n 选择)在这里插入图片描述

? Save this as a preset for future projects? (y/N)	//是否要将当前的配置保存为预设用于未来项目

如果选择保存(y)

在这里插入图片描述

? Save preset as:	//预设名称

13.等待安装，项目初始化完成

在这里插入图片描述

启动服务

npm run serve

全部选择

在这里插入图片描述

小鸟游上岸
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue-manage-system-master-fsk
02-07
竞争管理系统 基于Vue公司+元素UI的后台管理系统解决方案。 React + Ant Design的版本正在开发中，仓库地址： 项目截图 登录 默认皮肤 浅绿色皮肤 赞赏 请作者喝杯咖啡吧！（微信号：linxin_20） 特别鸣谢 前言 该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web管理系统）开发。基于vue.js，使用vue-cli3脚手架，引用Element UI组件库，方便开发快速简洁好看的组件。分离颜色样式，支持手动切换主题色，而且很方便使用自定义主题色。 功能 元素用户界面 登录/订阅 仪表板 表格 选项卡 表单 图表 :bar_chart: 富文本编辑器 markdown编辑器 图片拖拽/裁剪上传 支持切换主题色 :sparkles: 列表拖拽排序 权限测试 404/403 三级菜单 自定义图标 可拖拽弹窗 国际化 安装步骤 git clone https://github.c
使用vue-cli3新建一个项目并写好基本配置(推荐)
01-21
1. 使用vue-cli3新建项目： https://cli.vuejs.org/zh/guide/creating-a-project.html 注意，我这里用gitbash不好选择选项，我就用了基本的cmd（系统命令提示符）：上下箭头和空格键可控制选项。 详细步骤： （1）vue create init： 这里我选择了自定义配置 （2）使用上下箭头和空格进行选择，我这里选择了这四个，之所以没用css pre-processors是因为我的项目中要用postcss-cssnext，后面会有详细配置说明 （3）后面的 Use class-style component syntax? 是否
如何搭建一个vue2项目(完整步骤)
最新发布
zzz1780340的博客
04-10 2159
从0-1搭建一个基础的vue2项目
vue-layout-diy:基于vue和flex的自定义布局
05-16
vue-layout-diy 基于vue和flex的自定义布局，。 S前缀为Sunflower简写，我们团队的命名空间。 项目步骤 使用vue-cli@2.9.3初始化项目； vue init webpack vue-layout-diy 根据个人/团队代码规范，配置eslint； 安装； 完成基于flex布局的组件SGrid SGridItem； 引入Element，完成SEmpty默认显示块； 异步组件配合代码分离时: 若使用插件的形式，s-empty在dev模式下渲染正常，在buid模式下无法渲染。 在main.js中通过Vue.component直接注册则正常。 为了方便在GithubPage展示效果，将build后dist中的结果拷贝至demo目录，并修改资源路径。 由于demo并非部署在Web服务器根目录下，所以分离的异步js文件找不到。 需要修改config/inde
alumni:Projeto 2 de TSIW-Vue CLI应用
03-22
校友 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。 已安装的模块（npm安装） vuex bootstrap-vue vue-router vue 添加Boostrap步骤 npm install vue bootstrap bootstrap-vue vue add bootstrap-vue Reiniciar o npm do projecto delete da pasta: node_modules npm install 部署 Abrir o Git Bash cd /c/Users/andre/Documents/ rm --f jokerwoman.github.io git clone https://github.c
vue.js系列中的vue-fontawesome使用
01-19
折腾前言 目前工作主要使用 vue.js 框架进行开发，自己又对 vue 不是那么了解，还是半桶的状态，所以得加紧步伐赶紧熟悉起来，这两天在使用脚手架 vue-cli 创建项目玩耍中，又一直对font-awesome锲而不舍，通过 github 了解到早有大牛搞出了 vue-awesome，因此就开始折腾了…… 废话不多说，开搞！ 准备工作 这个是作者的 github 地址：飞机 为了演示完整步骤，用脚手架新建个项目 正在创建中… 趁此闲话几句 这种方式使用有个好处就是，你可以自己自定义任何图标，即用 svg 格式输出，然后通过 Icon.register 去注册一个图标，注册方式如下： 如果
yarn 创建 Vue2 项目（包括node的方式和遇到版本问题如何解决）
weixin_46684929的博客
02-20 1645
问题描述：使用vue create命令，但是报 vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6. You may want to run the following to upgrade to Vue CLI 3 的错误。每次修改项目代码后，开发服务器都会自动重新编译和刷新页面，以便你可以看到修改后的效果。这个命令会自动下载并运行最新版本的 Vue CLI，然后使用它来创建一个新的项目。
[Vue]Vue2.x创建项目全程讲解，保姆级教程，手把手教，Vue2怎么创建项目（上）
qq_51055690的博客
05-12 9922
vue教程入门，vue 安装vue脚手架，安装vue-cli 使用vue脚手架 创建一个vue脚手架项目 创建一个vue2的项目 安装vue vue创建项目过程
使用VueCli创建vue2项目
qq_60633200的博客
06-15 2044
利用vue-cli创建vue2项目的流程
【vue2 】如何创建自定义项目
weixin_72979483的博客
09-22 196
vue如何创建自定义项目？ 使用自定义创建项目可以，让vue-cli帮我们配置一些东西比如路由的配置，当使用了自定义创建选择了vuerouter之后，创建出来的项目就是自带了路由配置的，只需要写一些路由规则。 首先需要保证安装了npm 和 vue-cli在前面的文章有写
vue2项目搭建全步骤-超级详细
肥晨开发的学习之路
08-10 7694
出现以下界面，就是成功了12 ( ) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。3 ( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人再用4 ( ) Progressive Web App (PWA) Support// 渐进式Web应用程序。
使用vue-cli创建vue2项目以及项目配置
qq_57039857的博客
01-10 3139
1、安装vue-clicmd：npm install -g @vue/[email protected]验证是否安装成功：vue -v 出现版本号说明安装成功2、创建项目vue create 项目名称根据自己的需求选择特性，如下所示：手动选择：选择自己需要的特性：例如：选择vue版本选择路由模式 （输入y和n都可以，y代表history模式没有#号， n代表hash模式有#号）：选择css预处理器，根据需求自行选择：格式化和代码检测的配置，默认的就行：代码格式检测时机，默认就行：你希望配置放在哪：是否保存特性，根据你
60秒带你了解Vue2.0的选项
weixin_47024018的博客
03-26 170
快速了解Vue选项 首先我们要先了解一下Vue的构造器有哪些？常见的有propsData、computed、methods、watch、mixins、extends ，接下来我们一起学习一下它们的使用和作用。 1、propsData 选项 propsData 是用来传递数据，使用全局的扩展器可以利用propsData进行传递数据，我们自定义一个header标签，然后使用Vue中的extend扩展构造器，往构造器中传递我们的数据，然后通过new来挂载，传递我们的数据。 <!DOCTYPE html&gt
移动端项目（vue2+vant组件库）
qq_45585640的博客
06-23 5125
在命令行中输入以下命令创建 Vue 项目： 这里建议两个都选上，更严谨。 这里建议选择第 1 个，保存到单独的配置文件，这样方便我们做自定义配置。 安装结束，命令提示你项目创建成功，按照命令行的提示在终端中分别输入： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UynFzUoP-1654274042910)(assets/1582010300149-9932febe-2625-4ee7-986f-9190ab449fec.png)]如
VUE项目创建及知识点
hylon5的博客
12-11 167
前端项目里面包的安装 前端现代项目开发环境 nodeJS 前端现代项目运行环境 浏览器 前端项目包管理（包安装工具）（插件安装工具） npm（nodeJS自带 慢，慢） cnpm（淘宝镜像） yarn （快快） npm install -g yarn 全局安装yarn npm和yarn功能一样 就是快点 前端项目包文件 两种 全局包（任何都可以使用） 项目包 （当前项目才可以使用） 初...
如何删除Vue-CLI生成的自定义配置
秋橙的知识商铺
12-18 3304
咱们在用Vue-CLI创建一个Vue项目的时候，在设置的路上会遇到一句话。 这句话长这样紫： Save this as a preset for future projects? (y/N) 这句话是什么意思呢？翻译成中文意思大概是：是否想把当前的配置保存一份预设以便下次创建项目时使用。再翻译成人话就是你想不想下次还使用同样的配置？ 如果选择N，全剧终… 开个玩笑︿(￣︶￣)︿ 如果选择y，会显示 Save preset as 这句话告诉你想怎么命名你的预设文件，这里我输入common-config S
搭建vue2项目的基本步骤
木方佳学的博客
06-09 958
为你的项目名称，你需要根据实际情况进行替换。在执行该命令后，Vue CLI 会自动下载所需的依赖并创建一个基础的 Vue.js 项目结构。Vue.js 提供了一种快速创建项目的工具——Vue CLI，我们可以通过它来创建基础的 Vue.js 项目结构和构建工具配置。以上就是 Vue.js 2.x 项目的基本搭建步骤。如果你还需要添加一些插件或者根据实际情况进行一些配置，则可以进一步修改。安装完 Vue CLI 后，我们可以使用它来创建一个 Vue.js 项目。安装 Vue CLI。
使用vue-cli创建vue2项目（详解）
逆水行舟 不进则退
04-02 9698
使用vue-cli创建vue2项目（详解） 说明！！！：Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。所以使用脚手架创建vue2的项目，需要先全局安装一个桥接工具，然后创建一个vue2的项目： 第一步：搭建node运行环境，根据操作系统选择相应安装包 下载地址：https://nodejs.org/en/download/ 检验是否安装成功，命令行中直接输入node -v，返回版本号即可。 第二步：安装webpack npm i
如何新建一个vue2项目（超详细哦）
热门推荐
不甜呐的博客
11-05 9万+
如何新建一个vue2项目（超详细哦）
vue-cli创建一个vue项目
07-27
你可以按照以下步骤使用 vue-cli 创建一个 Vue 项目： 1. 首先，确保你已经安装了 Node.js。你可以在终端中运行 `node -v` 来检查是否已经安装。 2. 安装 Vue CLI。在终端中运行以下命令： ``` npm install -g @vue/cli ``` 3. 创建一个新的 Vue 项目。在终端中运行以下命令： ``` vue create 项目名称 ``` 这里的 "项目名称" 是你想要给你的项目起的名字，你可以自定义。 4. 运行上面的命令后，Vue CLI 会提示你选择一些预设配置。你可以选择默认配置，也可以手动选择所需的配置。 5. 安装项目依赖。进入到项目目录中，运行以下命令： ``` cd 项目名称 npm install ``` 6. 启动开发服务器。运行以下命令： ``` npm run serve ``` 这将启动一个本地开发服务器，你可以在浏览器中访问 `http://localhost:8080` 来查看你的应用程序。 这样，你就成功创建了一个 Vue 项目并启动了开发服务器。你可以根据需要修改项目中的代码和配置。祝你编写愉快！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值