Vue如何启动项目

news2025/7/12 11:42:31

文章目录

  • 文章目录

    前言

    一、首先了解vue-cli脚手架

    二、安装脚手架

    三、启动项目

    总结



    前言

           废话就不多说了,直接进入正题


一、首先了解vue-cli脚手架

vue-cli 是一个基于 Vue.js 进行快速开发的完整系统

vue-cli是 基于 webpack 构建 vue 前端模块工程环境webpack 将 原理网页的 依赖变成 webpack的依赖, 只需要将网页的依赖在main.js 入口文件中引入即可在浏览器上运行

网址:介绍 | Vue CLI

二、安装脚手架

npm install -g @vue/cli

  注意:查看node版本,要在v14以上

三、启动项目

命名为:

vue create 项目名

   注意:创建的目录下的别的文件名不能包含vue,并且不能够使用驼峰命名法,两个单词之间使用“-”分割 

运行命令成功,会出现一下界面:

让你进行选择是默认安装还是通过自己设置的安装。

 这里选手动安装,第三个选项

 接着会让选择相应的配置,勾选以下几个选项,利用空格勾选,所有选择完毕后按回车确认

 这里选择2.x,根据需求选择

使用历史模式路由器?选择是

 选择css预编译器,这里我选择的是sass

 选择一个linter / formatter配置:这里选择的是标准配置

  询问是否记住你所选择的配置,进行保存,这里选择保存

 你喜欢把Babel, ESLint等的配置放在哪里?这里选择在专用配置文件中,新建了一个配置文件

   询问是否记住你所选择的配置,在未来的项目创建中使用,进行保存,这里选择保存

 起一个名字记录,下次方便找到

 

 出现以下内容说明已经启动成功。

进入项目文件夹,在cmd命令行运行命令,注意:一定得去项目文件夹

npm run serve

出现这个内容表示项目启动完成。


 

总结

vue的项目启动过程中,还是存在一些小细节还是需要注意,小伙伴们还是得仔细的安装哦

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/406147.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Vue.js介绍

目录 一、 Vue.js是什么 二、 Vue.js优点 三、 前提条件 四、 安装Vue 1. 直接用 script 标签 引入 2. 命令行工具 (CLI) 3. 其他方法或细节应用 五、声明式渲染 六、 理解什么是MVVM MVVM模式的组成部分 MVVM优点 一、 Vue.js是什么 Vue.js (vue读音 /vjuː/&am…

【CSS扩展】VUE如何使用或修改element plus中自带的CSS全局变量来定义样式

目录 一、CSS声明全局变量 二、使用el plus 和 el ui的自带样式 1、element plus—— var.scss位置 2、element ui—— var.scss位置 三、修改el plus 和 el ui中的自定义样式变量(方法一致) 本萌新最近在写网页时使用到了element plus中自带的CSS全…

Vue中如何解决跨域问题

跨域 跨域报错是前端开发中非常经典的一个错误,报错如下 Access to XMLHttpRequest at ...... from origin ...... has been blocked by CORS policy: No Access-Control-Allow-Origin header is present on the requested resource. 跨域错误源自于浏览器的同源…

《中秋佳节倍思亲》——2022年这场中秋

中秋佳夜,圆的是月,满的是情,但一人终究扛下离愁 作为一个杭漂者,虽不及北漂般艰难困苦,但也举步维艰啊! 或许,这对我而言,正是一个别样的中秋,也正是一个值得我一生纪念…

多端统一开发解决方案---Taro

Taro 一套代码,多端运行,释放双手的摸鱼神器 文章目录Taro 一套代码,多端运行,释放双手的摸鱼神器1. 简介2. 准备工作2.1 安装及使用2.1.1 开发者工具2.1.2 tarojs2.1安装tarojs工具3. Taro 使用4.限制5.路由跳转汇总6.注意事项7.…

vue3:安装配置sass

目录 前言: 1. 安装sass 2. 新建style目录,存放scss文件 3. main.ts 4. vite.config.ts 5. Test.vue 前言: 对于前端开发人员来说,css预处理的语言已经是家常便饭了,如sass,less等等,那么…

深度学习实战 1 YOLOv5结合BiFPN

目录 1. BiFPN论文简介 2. 在Common.py中添加定义模块(Concat) 3. 将类名加入进去,修改yolo.py 4. 修改train.py 5. 修改配置文件yolov5.yaml 1. BiFPN论文简介 论文《EfficientDet: Scalable and Efficient Object Detection》地址:https://arxiv…

微信小程序云开发的具体使用教程

小程序云开发介绍 云开发官方文档 一个小程序在开发时,除了考虑界面功能逻辑外,还需要后端的数据支持。而为了获得后端的数据支持,开发者需要提前考虑服务器、存储和数据库等需求,并且会花费时间精力在部署应用、依赖上。因此官方…

【JavaScript 逆向】网易易盾滑块逆向分析

声明本文章中所有内容仅供学习交流,相关链接做了脱敏处理,若有侵权,请联系我立即删除!案例目标验证码:aHR0cHM6Ly9kdW4uMTYzLmNvbS90cmlhbC9qaWdzYXc以上均做了脱敏处理,Base64 编码及解码方式:…

MongoDB数据库性能监控详解

目录一、MongoDB启动超慢1、启动日常卡住,根本不用为了截屏而快速操作,MongoDB启动真的超级慢~~2、启动MongoDB配置服务器,间歇性失败。3、查看MongoDB日志,分析“MongoDB启动慢”的原因。4、耗时“一小时”,MongoDB启…

color ui

color ui——组件使用 组件类型 ColorUI Vant webapp ColorUI 下载地址 Git地址 官网地址 简介 ColorUI是一个css库!!!在你引入样式后可以根据class来调用组件,一些含有交互的操作我也有简单写,可以为你开发提供一…

微信小程序项目实例——我有一支画笔(画画)

微信小程序项目实例——我有一支画笔(画画) 文章目录微信小程序项目实例——我有一支画笔(画画)一、项目展示二、首页三、自由绘图四、照片绘图文末项目代码见文字底部,点赞关注有惊喜 一、项目展示 我有一支画笔是一…

JS中let用法

JS中let用法 基本用法 Let命令用来声明变量。它的用法类似于var,但是所声明的变量。只在let命令所在的代码块内有效。 上面代码块中,分别用let和var声明了两个变量。然后在代码块之外调用这两个变量,结果let声明的变量报错,var声…

蓝桥杯刷题冲刺 | 倒计时28天

作者:指针不指南吗 专栏:蓝桥杯倒计时冲刺 🐾马上就要蓝桥杯了,最后的这几天尤为重要,不可懈怠哦🐾 文章目录1.卡片2.数字三角形3.购物单4.回文日期1.卡片 题目 链接: 卡片 - 蓝桥云课 (lanqiao…

echarts 柱状堆叠图(图例和x轴都是动态的)

问题描述: echarts柱状堆叠图,是很常用的图表,官网的例子很简单 。图例(legend),x轴(xAxis)都是写死的。但是一般实际应用中都是 动态的。下面就举个例子,实现图例和x轴…

uniapp开发微信小程序自定义顶部导航栏

自定义导航栏渐变色,先上效果 使用uniapp开发小程序,在不同界面,要去对页面进行修改顶部导航栏。 比如说要去定义导航栏的背景颜色,常规的去定义导航栏背景颜色 全局定义导航栏 "window": {"navigationBarBackg…

猿创征文|一名大三学生的前端学习之路(真情流露)

✅ 作者简介:一名大三的大学生,致力于提高前端开发能力 ✨ 个人主页:前端小白在前进的主页 🔥 系列专栏 : node.js学习专栏 ⭐️ 个人社区 : 个人交流社区 🍀 学习格言: ☀️ 打不倒你的会使你更强&#xf…

vue3中使用axios

vue3中使用axios 1.axios在vue3.x中的基础入门使用 在不涉及使用axios进行请求拦截以及响应拦截的场景下,axios的使用可以简化为以下步骤。 step1. 使用npm安装axios npm install axiosstep2. 我们将要使用的axios实例单独编写成一个js文件,文件夹可以建…

猿创征文|【C++游戏引擎Easy2D】学C++还不会绘制一个简单的二维图形?一篇文章教会你

🧛‍♂️iecne个人主页::iecne的学习日志 💡每天关注iecne的作品,一起进步 💪学C必看iecne 本文专栏:【C游戏引擎】. 🐳希望大家多多支持🥰一起进步呀! ✨前…

【Vue组件间通信】 全局事件总线、订阅与发布

目录 一、全局事件总线 作用 安装 组件使用案例 案例分析 组件一(小明) 组件二(小红) 效果展示 二、订阅与发布 安装 组件使用案例 案例分析 组件一(小明) 组件二(小红&#xff…