Vue脚手架安装及创建新项目（保姆级教程）

已于 2023-07-10 17:28:56 修改
阅读量1.6k 收藏 6
点赞数 2
分类专栏： 前端 文章标签： vue.js 前端 javascript vue
于 2023-07-10 17:24:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57232638/article/details/131641903
版权

目录

1、安装Nodejs

2、安装Vue脚手架

3、 创建Vue项目

4、如何安装项目需要的依赖和插件（以element-ui为例）

5、用WebStrom或者Vs code打开项目

1、安装Nodejs

先win+r然后cmd打开window命令窗口

 在window命令窗口输入node --version查询自己的电脑有没有安装Nodejs

node --version

 如果已经安装了Nodejs，会显示Nodejs的版本号

 如果没有安装的话，就需要去官网安装，如果不想去官网找的话，这里为大家准备了网盘链接可以下载，官网最新的是20.4.0版本的，官方推荐的长期支持的稳定版本是18.16，下载18.16版本即可。

百度网盘链接： 

链接：https://pan.baidu.com/s/1bjEuNm0zm9hdGzFj4DIkMA?pwd=yqqy 
提取码：yqqy 

下载完成后解压安装即可

2、安装Vue脚手架

先在window命令窗口输入vue --version查看是否安装Vue脚手架

vue --version

和Nodejs一样，如果安装就会显示版本号，如果没有安装，就在window命令窗口输入以下命令

 npm install -g @vue/cli

以上就是安装步骤，下面来教大家如何创建一个Vue项目 

3、 创建Vue项目

在window命令窗口输入vue ui

vue ui

此时会打开一个网页，然后在红色框中输入本地的文件夹路径，这个可以自己选择，C，D，E盘都可以，但是要保证这个文件夹在本地中存在，输入完后一定要按回车键！一定要按回车键！一定要按回车键！

 然后输入项目名称，点下一步继续配置

 这里选择一下手动配置项目，点击下一步继续配置

 功能这里选择一下手动配置的一些信息

最后修改一下版本即可完成Vue工程的创建 

4、如何安装项目需要的依赖和插件（以element-ui为例）

安装element-ui有两种方法

（1）使用命令来安装

npm install -s element-ui

（2）使用图形化安装

点击左侧的插件按钮，然后点击添加插件

 然后下载插件，这里以element为例，以后项目中如果有需要下载插件就在这里搜索下载

5、用WebStrom或者Vs code打开项目

一只 一只Y
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
安装Vue脚手架， 用脚手架创建vue工程项目
06-13
安装Vue脚手架， 用脚手架创建vue工程项目
使用 Vue-cli 创建项目
weixin_53156345的博客
05-05 987
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vjcxSwAK-1683203828586)(D:\杂物房\笔记\和项目相关\image\dong.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ITkxqy8a-1683203828586)(D:\杂物房\笔记\和项目相关\image\wen.png)]​ 通过 ↑↓ 箭头选择依赖，按 “空格” 是否选中，按 “a” 全选，按 “i” 反选。如果有需要的可以选择 “y”
vue脚手架搭建项目（详细教程）
weixin_65855560的博客
06-19 1万+
vue的自动化构建工具是node.js帮我们做的，这就是我们为什么要下载node的原因。npm install < name > --save：安装的同时，将信息写入package.json中，项目路径中若是有。Vue脚手架指的是vue-cli，它是一个快速构建**单页面应用程序（SPA）**环境配置的工具）命令行界面。npm list：查看当前目录下已安装的node包。npm ls：查看当前目录下已安装的node包。npm -v：查看npm安装的版本。：是一个开源的前端打包工具。1.进入终端执行命令。
Vue-cli（脚手架）的创建
计算机硕士的博客
04-26 2935
Vue-cli（脚手架）的创建。
vue脚手架搭建项目全过程
cnpma的博客
06-28 465
在vue/cli5.x之后, 项目搭建时,vue.config.js会自动创建, 结构如下。以上是vue/cli 3.x/4.x的写法, 手动创建vue.config.js。host: 'localhost', // 主页地址。lintOnSave: true, // 在保存时校验格式。publicPath:'/', // 启动页地址。outputDir: 'dist', // 打包的目录。proxy: null, // 设置代理。publicPath: '/', // 启动页地址。
Vue-Cli(脚手架)安装及如何创建Vue-Cli项目-保姆级别教程,手把手教会你
热门推荐
m0_72568513的博客
06-09 1万+
快速创建 Vue.js 项目的向导式用户界面：我们只需要按照界面上的步骤一步步操作，就可以快速创建一个 Vue.js 项目。支持自定义配置：Vue CLI 提供了多种配置选项，开发者可以根据自己的需求进行选择和配置。支持插件扩展：Vue CLI 支持插件化扩展，开发者可以根据需要安装插件，例如路由、状态管理等。支持开箱即用的工具集成：Vue CLI 集成了很多实用的工具，例如 Babel、Webpack、ESLint 等。
2024最新：关于基于vue-cli脚手架创建vue项目（图文版）
m0_69097184的博客
09-21 335
它确保各种构建工具与合理的默认值一起顺利运行，因此您可以专注于编写应用程序，而不是花费数天时间争论配置。同时，它仍然提供了调整每个工具配置的灵活性，而无需弹出。TypeScript 是一个 JavaScript 的超集，包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript 在浏览器运行。代码风格检查和格式化（如：ESLint）【建议选择】vue-router（Vue 路由）【建议选择】。vuex（Vue 的状态管理模式）。E2E（端到端）测试。概述（来源于官方文档）
Vue 安装 vue-cli 脚手架 & 创建 vue 项目
01-06
windows vue vue-cli 安装 macos 前往 node.js 官网下载 MacOS 版然后无脑下一步。安装完成后验证一下。 node -v # 验证 nodejs 版本 npm -v # 验证 npm 版本 切换 npm 为淘宝源。 // 切换到淘宝镜像 npm config ...
vue-cli脚手架的安装教程图解
12-02
vue-cli脚手架模板是基于node下的npm来完成安装，下面给大家介绍vue-cli脚手架的安装，具体内容如下所述： https://github.com/vuejs/vue-cli 官网 使用官方推荐的webpack 条件： node在4.以上，npm在3以上，查看...
基于脚手架创建Vue项目实现步骤详解
10-15
主要介绍了基于脚手架创建Vue项目实现步骤详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
使用vue-cli脚手架创建vue项目
changwen17的博客
02-01 244
使用vue-cli创建vue
Vue CLI脚手架自定义创建项目详细过程
drhnb的博客
07-09 726
如果已经下载和配置好了node.js,那么就可以使用Vue CLI脚手架来创建vue项目。
脚手架创建vue项目
qq_38750144的博客
06-15 166
小白学习安装vue
Vue-Cli - Vue 脚手架的创建 以及 目录结构说明
最新发布
CYK_byte的博客
10-18 1556
f）这个问你是否进行单词校验，校验出错会有红色波浪线. 这里不需要，因为你可能会写很多特殊字符，因此输入 n 回车即可.之后他就会去构建项目了，如果此时出现了如下错误，说明你权限不够，要使用管理员的方式打开命令行，再执行上述步骤.b）接下来会问你项目描述是否叫（默认）："A Vue.js project". 如果不想改，直接回车即可.d）接下来会问你，是否采用运行 + 编译的方式，实际上就是是否要热部署的意思，直接回车即可.h）接下来问你是否要使用 npm 来管理项目，这个肯定是需要的，直接回车即可.
脚手架（vue-cli）创建Vue项目超详细过程
weixin_52580677的博客
03-23 1万+
Vue创建项目 1.创建项目 2.项目手动配置 3.选择vue版本 4.路由模式 ... Vue项目运行 ...
vue脚手架安装及创建、运行项目教程
交小新的博客
04-09 4002
1.下载node.js 如果是window7系统: 下载安装13的版本 2).安装node.js 之后一路下一步安装即可. 3).检查node js版本 cmd中任意位置输入 node -v npm -v 进行检查 5).切换淘宝NPM库 5.1).npm install -g cnpm --registry=https://registry.npm.taobao.org 方式2: 5.2).npm config set registry https://registry.npm.taobao.org
搭建vue脚手架，以及目录介绍 全网最细讲解！！！！！！
logical_thinking的博客
10-10 628
当我们打开脚手架时，我们可以看到这里有很多的文件夹，以及文件这里不禁有些困惑，我们应该在那里写代码呢，我的图片什么的放在那里呢？这些文件夹都是用来干什么的呢？下面就来告诉你这些文件 是用来干什么的当我们点开文件夹可以发现，在assets中并没有css imgs 目录啊 ，这里是需要我们自己创建的提示：这里对文章进行总结：本篇文章主要讲述了怎么去安装脚手架以及介绍了，我们创建的项目各个文件夹都是来存储什么文件的。
Vue脚手架搭建项目
酸菜丶小子
07-27 4449
Vue脚手架搭建项目以及node版本切换
vue脚手架搭建
qq_42401946的博客
04-19 90
安装node.js Vue脚手架自带配置： 安装Vue脚手架，通过Vue脚手架创建项目 配置router路由，vuex，scss 第三方ui库： 配置Element-UI组件库 请求接口： 配置axios库 一、 安装node，vscode 二、 全局安装脚手架vue-cli 链接：https://cli.vuejs.org/zh/guide/creating-a-project.html 命令：npm install -g @vue/cli 三、 选择项目存放路径，创建一个项目 命令：vue crea.
vue脚手架创建新项目
10-18
好的，使用 vue-cli 可以快速创建一个新的 Vue 项目。首先需要安装 vue-cli，可以使用以下命令进行安装： ``` npm install -g @vue/cli ``` 安装完成后，可以使用以下命令创建新项目： ``` vue create <project-name> ``` 其中 `<project-name>` 是你想要创建的项目名称。执行该命令后，会出现一些选项供你选择，例如你想要使用哪种预设、是否需要 Babel、ESLint 等等。根据自己的需求进行选择即可。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值