构建Vue——脚手架vue-cli3

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

木上曰末

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

阅读量145

点赞数

分类专栏： Vue 文章标签： vue node.js

本文链接：https://blog.youkuaiyun.com/weixin_48673715/article/details/115076485

版权

Vue 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何安装Node.js和Vue CLI3，包括命令行安装和可视化创建项目的过程。创建项目时，可以选择预设选项如Babel、Router和Vuex，并通过配置文件vue.config.js进行自定义设置。注意Vue CLI3相较于旧版缺少了build和config目录，需手动创建vue.config.js进行webpack配置。

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

安装node

选择对应系统进行下载，下载完成后直接安装即可
下载地址：node.js

输入命令，成功输出版本即为安装成功
	node -v

安装vue-cli3

npm install -g @vue/cli  这是最新版脚手架的安装命令
旧版：npm install -g vue-cli

输出版本号即为安装成功
	vue -V

创建项目

使用命令创建：
	vue create project
	vue init webpack project

使用可视化创建：
输入指令：vue ui   进入可视化操作面板

在这里插入图片描述

步骤一：创建文件
在这里插入图片描述
步骤二：创建项目

步骤三：选择预设
在这里插入图片描述
步骤四：选择依赖
Babel：转化js的一些高级语法（例如ES6）
Router：路由
Vuex：为vue.js应用程序开发的状态管理模式
使用配置文件：会独立出一个文件，方便配置

步骤五：选择配置并创建项目

配置成功啦！
在这里插入图片描述
注意：
3.0的目录比旧版本少了两个目录：build和config。需要对webpack进行配置的话，要手动在根目录新建一个vue.config.js文件。
vue.config.js常用配置：