使用vue脚手架快速搭建vue 2项目

最新推荐文章于 2025-08-26 20:16:08 发布
原创 最新推荐文章于 2025-08-26 20:16:08 发布 · 743 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端

本文引导读者简单了解Vue CLI的使用，包括如何安装、创建项目、启动项目。通过命令行工具创建名为'hello-word'的Vue项目，并展示了项目的基本结构。进一步介绍了如何引入和在入口文件main.js中应用Element-UI框架，为前端开发提供了一个快速搭建UI界面的方法。

简单了解vue-cli

官网地址:https://cli.vuejs.org/zh/guide/browser-compatibility.html

前提

1.安装node(js代码的运行环境)、npm；
2.全局安装vue-cli;

命令创建项目

vue create hello-word
在这里插入图片描述
等待项目创建成功即可

开发工具打开刚刚创建的项目

项目结构如图所示在这里插入图片描述

启动项目

针对cli的项目，直接 npm run serve
在这里插入图片描述
在这里插入图片描述

当前项目引入element-ui框架

使用命令引入element-ui框架

npm i element-ui -S

入口文件

对于cli项目，入口文件为main.js

安装完element-ui框架之后，需要在入口文件进行引入

在这里插入图片描述

使用vue-cli脚手架创建vue2项目
qq_51284317的博客
07-06 1373
使用vue-cli脚手架创建vue2项目
Vue入门及脚手架搭建
m0_56383660的博客
02-24 521
跟着青戈戈做毕设
第一步 Vue2 使用 Vue 脚手架 Vue CLI 搭建一个 Vue.js 前端项目框架
mebell的专栏
09-18 1096
Vue CLI 是一个用于快速搭建 Vue.js 项目的脚手架工具。它集成了开发所需的各种工具和常见配置，让你可以专注于编写代码而不用为构建过程烦恼。本教程将介绍如何使用 Vue CLI 来搭建一个基本的 Vue.js 项目。
用脚手架新建一个vue2的项目
sinat_34896766的博客
01-05 1557
2、在项目新建路径的外层文件夹下打开cmd，输入vue create 项目名(需要安装node，node安装完成后，可用node -v查看安装版本。项目名不能包含大写母，否则会提示以下错误。注意此时的v是大写的V。
Vue2 通过脚手架（cli）创建项目方式
weixin_45703831的博客
04-30 1909
【注意，创建的文件夹名字最好不要与项目名同名】
使用vue-cli（vue脚手架）快速搭建项目的方法
12-10
vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目。这篇文章将会从实操的角度，介绍整个搭建的过程。 1. 避坑前言 其实这次使用vue-cli的过程并不顺利，反复尝试几次都遇到以下这个...
详解使用vue脚手架工具搭建vue-webpack项目
08-30
详解使用 Vue 脚手架工具搭建 Vue-Webpack 项目 知识点 1: Vue.js基础知识 在开始使用 Vue.js 前，我们需要了解 Vue.js 的基本概念。Vue.js 是一个渐进式的 JavaScript 框架，用于构建用户界面。其核心思想是将...
使用vue-cli（vue脚手架）快速搭建项目
2401_84435768的博客
04-27 748
1、《亿级流量Java高并发与网络编程实战》2、《分布式一致性算法开发实战 媒体宣传文案》3、《Java多线程与大数据处理实战》4、《深入浅出TCPIP和VPN》 目录一、什么是VueCLI1、如果你只是简单写几个Vue的Demo程序，那么你不需要VueCLI脚手架。2、如果你在开发大型项目，那么你需要，并且必然需要使用VueCLI。3、CLI是什么意思？4、脚手架长什么样？5、脚手架依赖于node.js和webpack二、安装Vue CLI脚手架三、runtime-compiler和runtime-onl
vue脚手架空白项目，搭建项目
最新发布
09-04
使用Vue.js进行项目搭建时，借助Vue脚手架（Vue CLI），开发者能够快速搭建起项目的基础结构，从而节省时间，更高效地投入到应用逻辑的开发中。Vue脚手架的空白项目提供了一个无预设配置的基本项目框架，开发者可以...
使用vue脚手架，如何新建一个vue2项目
qq_57676486的博客
04-11 1362
2. Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpakc 配置，1. 如出现下载缓慢请配置 npm 淘宝镜像：npm config set registry。1. Vue 脚手架是 Vue 官方提供的标准化开发工具（开发平台）。版本要求：Vue的版本根据个人需要，脚手架是向下兼容的使用最新版本即可。请执行：vue inspect > output.js。第一步（仅第一次执行）：全局安装@vue/cli。2. 最新的版本是 4.x。，然后使用命令创建项目。
Vue 2 脚手架搭建指南
longxinma的博客
08-26 697
Vue 组件的主要作用是封装可重用的代码块，提高代码的复用性和可维护性。
vue-cli 2.x搭建项目
小青柑的博客
05-17 298
创建一个vue项目: 1,全局安装vue命令行模块 vue-cli npm install vue-cli -g 注意:vue-cli 依赖于webpack,在使用vue-cli之前,先安装webpack npm install webpack -g 2,创建项目文件夹,并在这个文件夹下打开命令行 3,初始化一个vue项目 vue init webpack 注意: 其中Eslint 选项是代码格式校验工具, 要选择NO ,否则会以严格模式校验代码, 如: 注释//后必须有且只有一个空格, 否则
VUE-脚手架搭建
xhmico的博客
12-15 3583
vue 有两个大版本，分别是 vue-2 和 vue-3，目前新项目的话用 vue-3 的会比较多以下我会分别提供搭建 vue-2 和 vue-3 脚手架的过程。
《基础篇第4章：vue2基础》：使用vue脚手架创建项目
刘大猫
05-27 1254
文章目录4.1初始化脚手架4.1.1说明4.1.2具体步骤4.1.3模板项目的结构4.1.4 创建第一个vue项目分析index.html组成部分4.1.5render函数4.1.6修改默认配置 4.1初始化脚手架 4.1.1说明 Vue脚手架是Vue官方提供的标准化开发工具（开发平台） 最新的版本是4.x 官网文档：https://cli.vuejs.org/zh/ CLI：Command Line Interface 4.1.2具体步骤 第一步（仅第一次执行）：全局安装@vue/cli。.
Vue2基础教程(脚手架版)
qq_57319760的博客
09-14 6367
本文讲解使用Vue脚手架进行Vue2学习，适合学习完一遍vue2基础的人进行复习
如何创建一个Vue项目（Vue2脚手架的安装）
热门推荐
m0_48806387的博客
12-29 1万+
安装脚手架 如何创建vue项目
Vue2脚手架创建项目
qq_39593914的博客
04-11 5531
Vue2脚手架创建项目 一、使用脚手架 1.安装 @vue/cli ​ 简述 cli ===> command line interface (命令行接口) // 安装 npm install -g @vue/cli # OR yarn global add @vue/cli // 升级 npm update -g @vue/cli # OR yarn global upgrade --latest @vue/cli // 版本查看 vue --
vue2(十一)-基础入门之脚手架创建项目与打包并部署项目
weixin_43520586的博客
12-30 2889
选择的工具。
VUE脚手架项目（二）
weixin_45001033的博客
07-23 191
什么是VUE脚手架，与html的区别 之前以html的形式的Vue.js是一款流行的JavaScript前端框架，一个用于创建用户界面的开源JavaScript框架，在更好地组织与简化Web开发。Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互 脚手架工具搭建的项目是把Vue作为一个模块,载入模块对待;在源码中引入vue模块，最终需要用构建工具载入模块；编写的文件以vue格式结尾，用Vue全新的方式进行统一的管理项目 vue中的模
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值