搭建vue项目

最新推荐文章于 2024-07-15 14:11:16 发布
最新推荐文章于 2024-07-15 14:11:16 发布
阅读量919 收藏 23
点赞数 21
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_49119052/article/details/134660411
版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言

提示：这里可以添加本文要记录的大概内容：

vue脚手架搭建项目学习内容。
根据此篇学习，原文出处为：http://www.taodudu.cc/news/show-1195425.html?action=onClick

提示：以下是本篇文章正文内容，下面案例可供参考

一、安装Vue CLI

安装Vue CLI
安装步骤省略，输入命令 vue -V 输出如下版本信息，即安装成功了，提示：2.0以下版本是没有提供图形化界面的，只能通过命令创建。
在这里插入图片描述
使用参考文档
1、https://cli.vuejs.org/guide/
2、https://cli.vuejs.org/zh/dev-guide/plugin-dev.html#%E5%BC%80%E5%A7%8B

二、创建项目

1.cmd打开项目存储路径

如图示：
在这里插入图片描述
在这里插入图片描述

2.输入vue ui

在这里插入图片描述
出现下面的信息后会自动跳转到vue脚手架的图形界面
在这里插入图片描述

2.点击创建

在这里插入图片描述

2.项目存储路径

在这里插入图片描述
这里我是创建新的项目
在这里插入图片描述

3.项目预设

在这里插入图片描述

4.基础技术功能配置

在这里插入图片描述

5.配置设置

在这里插入图片描述
点击创建项目

6.根据开发习惯、喜好选择是否保存为预设模板

在这里插入图片描述

7.完成创建项目跳转到项目仪表盘

在这里插入图片描述

7.测试项目是否正常运行成功

在这里插入图片描述
在这里插入图片描述

二、添加依赖、插件、相关技术栈

1.添加插件、集成Element-ui

添加elment ui 插件
在这里插入图片描述
点击添加插件后
在这里插入图片描述
随后点击完成安装。

安装成功如下：
在这里插入图片描述

2.添加依赖、如Axios依赖库

添加Axios依赖库
在这里插入图片描述
点击安装依赖后
在这里插入图片描述
安装成功
在这里插入图片描述

三、启动项目

启动项目的步骤：
1.点击任务
2.点击serve
3.点击启动按钮
4.点击输出按钮

在这里插入图片描述
5.进入启动后的项目地址 http://1ocalhost:8080/或者http://192.168.1.51:8080/
以下为项目启动成功页面。
如果是在本地应用打开，比如VScode，启动命令为： npm run serve
在这里插入图片描述

总结

以上就是vue脚手架搭建项目的全部内容。
仅以此作为学习记录。

汤姆是你吗
关注
  • 21
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
创建vue项目，完整步骤
weixin_48327767的博客
01-05 527
vue/cli3.0 增加一个可视化项目管理工具，全局安装完成 cli3.0 之后，可以直接在 cmd 输入命令：vue ui 启动即可，地址默认是 localhost:8000 ( 回车后打开 )全局安装 webpack：npm install webpack -g (vue2需要安装这个）如果没有选择初始化项目，需要进入项目目录，输入 npm install 初始化。安装过程中可能会失败，如果失败了，可以使用淘宝镜像安装。如果安装失败或者检查是否安装成功报错，可以 “
webpack-vue:使用webpack搭建vue项目
05-09
使用webpack搭建vue项目 1.创建一个空项目 npm init -y 2.下载webpack，webpack-cli 目前可以使用webpack5不过还是建议使用webpack4 npm i webpack@4.44.2 webpack-cli@3.3.11 -D 3.配置webpack 1.根目录下创建...
vue项目搭建（完整步骤）
Whit3ZzT的博客
12-03 3595
vue项目搭建
vue快速上手——创建vue项目，vue基本使用方式，路由vue-Router，转态管理vuex
最新发布
weixin_73582152的博客
07-15 1119
Node.js 是一个开源、跨平台的 JavaScript 运行时环境，它允许开发者在服务器端运行 JavaScript 代码。Node.js 是基于 Chrome V8 引擎构建的，它的设计目标是提供一种高效、轻量级的方式来构建可扩展的网络应用程序。事件驱动：Node.js 使用非阻塞 I/O 模型，使其非常适合处理大量并发连接，这使得它在构建实时应用程序（如聊天应用）时非常高效。单线程。
搭建一个vue项目(完整步骤)
duanna0824的专栏
06-22 2万+
一、安装node环境　　1、下载地址为：Node.js　　2、检查是否安装成功：如果输出版本号，说明我们安装node环境成功　　3、为了提高我们的效率，可以使用淘宝的镜像：npmmirror 中国镜像站　　输入：npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了。　　检查是否安装成功：二、搭建vue项目环境　　1、全局安装vue-cli　　npm install --
搭建一个vue项目完整步骤及详细讲解
m0_66722601的博客
09-14 5030
搭建一个vue项目完整步骤及详细讲解
如何搭建一个vue项目(完整步骤)
qq_39093474的博客
09-11 2万+
这里如果选择保存的话，就要输入名字，默认就是文件夹的名字，下次配置的时候就会显示这个文件配置的选项就像上面的一样，在配置的时候会多出来一个。）下载hbuildx安装文件（已提供，无需下载），下载后，直接解压就可以使用。代码检查，选标准的就行，方向键切换，空格键选择然后回车。按空格键选择要安装的配置资源，带 * 号说明被选上了。上下方向键选择版本，这里我们选择vue2，然后回车。代码检查时间，方向键切换，空格键选择然后回车。启动成功之后，打开路径看到如下界面说明成功。通过上下方向键选择对应配置，然后回车。
webstorm搭建vue项目（新手参考）
01-20
安装webstorm 首先安装webstorm，因为webstorm 集成了多种版本控制工具，基本的功能都可以使用，比如git。同时它也支持node.js调试，对于学生也有免费的优惠，稍后会讲如何申请。...3. 搭建vue之前准备工
VSCode搭建Vue项目的方法
10-15
VSCode搭建Vue项目的知识点: 一、基础知识准备 1. VSCode介绍 VSCode全称Visual Studio Code，是微软推出的一款轻量级且功能强大的代码编辑器。它支持多种编程语言的语法高亮、智能代码补全、自定义热键、Git控制...
webpack搭建vue 项目的步骤
11-27
【webpack搭建Vue项目的步骤】 在开始搭建Vue项目之前，确保你已经安装了必要的工具，包括`webpack`、`vue.js`、`npm`和`nodejs`。由于我们将使用`npm`来管理Vue项目，因此首先需要安装Node.js环境。安装完成后，...
vue项目详细搭建步骤
04-02
详细描述怎么搭建vue项目，nodejs安装，idea支持，以及vue打包部署
创建一个Vue项目的完整步骤
weixin_39228870的博客
12-29 2280
创建一个Vue项目的完整步骤 一、安装node、npm 1 下载链接：node下载 下载完毕后安装node，可以一直点击下一步，npm会随着node安装也安装上，环境变量也会自动配置 2 验证是否安装成功 window+R 输入cmd打开命令窗口 输入命令node -v npm-v 显示版本号后则表示安装成功 二、配置全局环境 window+R 输入cmd打开命令窗口 在命令窗口中输入命令npm ...
Vue项目搭建流程
飞翔的企鹅的博客
04-16 1243
对于页面中固定不变的东西要采用组件进行封装，在components文件夹下创建对应的vue文件，作为组件，在指定的vue中进行引入。先在src下创建views目录，然后创建vue页面，其中一个Main.vue作为父路由，将其他组件按照布局容器进行引入。// 目标服务器，所有以/api开头的请求接口代理到目标服务器。// 重写路径，此时用于匹配反向代理的/api可以替换为空。// 代理请求， 匹配所有以/apj开头的请求。//当返回438跳转到登录页面不允许登录。// //清空token 跳转登录页。
vue项目搭建步骤
亱語的博客
08-11 1万+
一． vue-cli初始化 1. 全局安装 vue-cli npm install --global vue-cli 2. 创建一个基于 webpack 模板的新项目 vue init webpack my-project 3. 安装依赖 cd my-project npm install (换源安装: npm install --registry https://registry.
手把手教你创建一个完整的Vue项目
weixin_45647685的博客
03-02 748
第一步：下载nodejs VUE是需要依赖于nodejs的、所以得先安装nodejs Node.js 安装包及源码下载地址为：https://nodejs.org/en/download/ 下载之后安装直接无脑下一步即可 安装完之后会自动添加环境变量 还是蛮智能的 然后测试是否安装成功 node --version npm -v 提示以上消息即安装成功了! ! ! 使用淘宝npm镜像（这样创建项目啥的都会很快） npm install cnpm -g 等待安装完即可、过程可能有点长！！！
如何创建一个vue项目（详细步骤）
热门推荐
Monsters___的博客
08-27 12万+
如何创建一个 vue 项目 详细步骤 (vue-cli2 / vue-cli3) (webpack / vite)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值