vue项目的创建过程

最新推荐文章于 2025-06-04 15:49:34 发布

港島起雾記.

最新推荐文章于 2025-06-04 15:49:34 发布

阅读量227

点赞数

文章标签： javascript es6 vue.js

本文链接：https://blog.youkuaiyun.com/weixin_53592107/article/details/121519329

版权

本文详细介绍了如何使用Vue CLI创建一个Vue项目，包括检查Node和npm版本，通过Vue CLI安装项目模板，选择依赖，配置项目，下载依赖并启动本地服务，最后在浏览器中验证项目创建成功。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue的创建步骤

一，前言

首先查看node，npm的版本

node-v ：node版本查看
npm -v ：npm版本查看

如果没有安装node，请先前往安装。官网： https://nodejs.org/zh-cn/或点击：node.js的安装

二，vue项目创建

1，安装vue脚手架：Vue Cli

官网： https://cli.vuejs.org/zh/
按照官网文档说明，安装命令为：npm install -g @vue/cli。安装完成之后，cmd窗口vue -V（大写V），查看@vue/cli版本

在这里插入图片描述

2，创建vue项目

在创建好的文件下，打开cmd窗口，输入vue create 项目名称。回车
在这里插入图片描述

def是默认
Man是手动，选择手动创建项目

2.1，如果不需要太多功能的话，可以选择快速创建，选择第一个，回车

在这里插入图片描述

2.1.1，选择手动创建项目（回车）

在这里插入图片描述

2.1.2，选择自己需要的依赖（上下选择，空格是否选择，a切换选择所有，i反转选择）

( ) Babel                             		// 支持高阶语法转换
( ) TypeScript                        		// 支持使用 TypeScript 书写源码
( ) Progressive Web App (PWA) Support       // 支持PWA
( ) Router                                  // 路由
( ) Vuex                                    // store
( ) CSS Pre-processors                      // CSS 预处理器
( ) Linter / Formatter                      // 代码风格检查和格式化
( ) Unit Testing                            // 支持单元测试
( ) E2E Testing                             // 支持E2E测试
本次我们选择：Babel，Router，Vuex，CSS Pre-processors。
至于代码格式化，现在的IDE开发工具中都有格式化插件，无需另行下载。