首页 前端知识 Vue CLI创建Vue项目详细步骤

Vue CLI创建Vue项目详细步骤

2024-02-23 11:02:18 前端知识 前端哥 278 575 我要收藏

🚀 一、安装Node环境(建议使用LTS版本)

在开始之前,请确保您已经安装了Node.js环境。您可以从Node.js官方网站下载LTS版本,以确保稳定性和兼容性。

中文官网下载

请添加图片描述
确认已安装 Node.js。可以在终端中运行 node -v 命令来检查是否已安装。

在这里插入图片描述

⚙️ 二、下载Vue和Vue CLI脚手架

打开命令行终端,执行以下命令来全局安装Vue和Vue CLI:

npm install -g vue @vue/cli

在终端中运行 vue -V 命令来检查是否已安装(这里要大写的V)
请添加图片描述

👣 三、创建Vue项目

在想要创建的位置路径下打开cmd(直接点击路径输入cmd即可打开当前位置的终端)

请添加图片描述

在终端中进入要创建项目的目录,运行以下命令创建新的项目:vue create 。

vue create <project-name>

其中 是要创建的项目名称

请添加图片描述

3.2 🛠️ 进入详细选择

创建过程中,您将进入一个交互式的选择界面,根据您的需求进行配置。

3.2.1 📦 选择创建模式

选择Vue的创建模式:Vue 2.x、Vue 3.x 或自定义。
请添加图片描述

Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
myvuepro ([Vue 3] dart-sass, babel, router, vuex, eslint)
Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
Manually select features

3.2.2 🛠️ 选择需要支持的特性

根据项目需求,选择需要支持的特性,如Babel、Router、Vuex等。
请添加图片描述

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press
to select, to toggle all, to invert selection, and
to proceed)
() Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
( ) CSS Pre-processors
(
) Linter / Formatter
( ) Unit Testing
( ) E2E Testing

我的配置:
请添加图片描述

3.2.3 🌟 选择Vue版本

选择您希望使用的Vue版本,例如2.x或3.x。
请添加图片描述

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router,
Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the
project with (Use arrow keys)
3.x
2.x

3.2.4 🚦 是否选择history路由模式

根据需求选择是否使用history路由模式,这会影响路由的URL显示方式。
请添加图片描述

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

这里的意思是问你本次项目是否采用history模式,如果选择Y,需要后台配置具体看vueRouter官网解释,这里我门选择 n

3.2.5 🎨 选择CSS预处理器

选择是否使用CSS预处理器,如Sass、Less等。
请添加图片描述

这里的意思是问你选择哪一种CSS预处理语言,我的项目中一般使用的是SCSS我选择第一个

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router,
Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the
project with 3.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)
Less
Stylus

3.2.6 📂 格式化代码方式

请添加图片描述

3.2.7 💾代码规则检测

这里的意思是问你什么时候进行代码规则检测,我一般会选择保存就检测,也就是Lint on Save
请添加图片描述

3.2.8

这里的意思是将Babel,PostCSS,ESLint这些配置文件放哪,通常我们会选择放到独立位置,让package.json文件干净点,所以选择第一个
请添加图片描述

3.2.9

请添加图片描述

这里是问你是否记录这次配置选择,选择之后会让你为这次配置起一个名字,这样下次可以直接快速配置选择,最后回车后就会初始化项目了
请添加图片描述

完成后如下图:

3.4 🌐 打开项目文件

使用命令行进入项目目录:

cd project-name

3.5 ▶️ 运行项目并查看页面

运行以下命令以启动开发服务器:

npm run serve

在浏览器中打开显示的URL,即可看到Vue应用的页面。

通过这些步骤,您已经成功地使用Vue CLI创建了一个新的Vue项目,根据项目需求进行了相应的配置。接下来,您可以根据需要进行开发和定制。 Vue CLI的强大功能将为您的项目带来便利和效率!🚀

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2533.html
标签
评论
发布的文章

程序员的中秋节

2024-03-09 09:03:01

js中几种追加元素的方法

2024-03-08 10:03:38

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!