Vue开发项目入门——Vue脚手架

news2024/11/19 5:55:22

1.什么是Vue脚手架

        Vue脚手架是Vue官方提供的标准化开发工具(开发平台),提供命令行和UI界面,方便创建vue工程、配置第三方依赖、编译vue工程。

        特别注意:Vue脚手架是用来方便开发的,但vue脚手架不是最终发布到生产环境的产品。很多人会误认为生产环境也要安装vue脚手架。

2.vue脚手架执行步骤

        建议以管理员角色打开cmd界面,开始->Windows系统->命令提示符->更多->以管理员身份运行。如果当前用户是管理员用户,直接使用组合快捷键Windows+R打开cmd界面

 1、先查看是否安装了vue,执行命令

vue -V

 如果提示:'Vue' 不是内部或外部命令,也不是可运行的程序或批处理文件。先排查自己的电脑有没有安装npm环境。

npm -V

如果显示版本号,说明安装了npm。

使用安装命令

npm install -g @vue/cli

 安装完成再使用Vue -V可以看到Vue的版本

 2、切换到指定目录,用命令创建项目

        建议将开发的项目可以放到同一个文件夹下建立分文件夹,方便维护查找。比如我将开发的vue项目统一放到我的F盘下的vueProject文件夹下。使用cmd命令先切换到F://vueProject下再使用创建项目命令。

F:

cd vueProject

vue create vuetest

注意事项:

使用vue create 后面的项目名,名字不要大写,比如我如果使用vueTest会提示:

Invalid project name:”vueTest”

Warning: name can no longer contain capital letters

3、执行完创建vue create 项目名的命令,会提示:

Vue CLI v5.0.4
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

提示你来选择2/3版本进行开发,通过上下键来切换选择2或者3

 

 注意:

(1)如果报错: ERROR command failed: npm install --loglevel error --legacy-peer-deps

解决方法修改C盘用户文件夹下的 .vuerc文件。 将 “useTaobaoRegistry”: false, 值true。

 修改之后创建成功,我们看一下创建之后的目录结构:

 4、启动项目【上一步最后有提示命令】

 cd vuetest
 npm run serve

5、访问项目 

浏览器中输入访问地址:http://localhost:8080/

 3.模板项目结构(各文件夹)

  • 1.node_modules  //npm install
  • 2. public
  • (1)favicon.ico: 页签图标
  • (2)index.html: 主页面
  • 3.src
  • (1)assets: 存放静态资源
  • (2)component: 存放组件
  • 4.App.vue: 汇总所有组件
  • 5.main.js: 入口文件
  • 6.gitignore: git 版本管制忽略的配置
  • 7. babel.config.js: babel 的配置文件
  • 8.package.json: 应用包配置文件
  • 9. README.md: 应用描述文件
  • 10. package-lock.json:包版本控制文件

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

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

相关文章

Canvas百战成神-圆(1)

Canvas百战成神-圆 初始化容器 <canvas id"canvas"></canvas>canvas{border: 1px solid black; }让页面占满屏幕 *{margin: 0;padding: 0; } html,body{width: 100%;height: 100%;overflow: hidden; } ::-webkit-scrollbar{display: none; }初始化画笔…

【网络请求之Axios】axios的基础用法

1. axios概述 axios 是一个专注于网络请求的库。axios 在请求到数据之后&#xff0c;在真正的数据之外&#xff0c;套了一层外壳。 2.axios的基本使用 2.1 发送get请求 代码&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta cha…

前端:弹幕标签用法详细介绍(跑马灯)

弹幕标签 1&#xff0c;注意弹幕标签marquee&#xff0c;现在一些浏览器是不支持的 2&#xff0c;弹幕标签也叫跑马灯 marquee格式及其含有的属性 1.基本格式 如下&#xff1a; <marquee></marquee>2.一些属性 1&#xff0c;direction属性&#xff1a;表示的…

39.JavaScript中Promise的基本概念、使用方法,回调地狱规避、链式编程

《JavaScript再出发》系列文章阅读《仙宗》发布招仙贴&#xff0c;广招天下道友 文章目录JavaScript中Promise的基本概念、使用方法&#xff0c;以及回调地狱规避一、前言二、Promise基本概念2.1 异步工作的封装2.2 Promise执行结果获取thencatchfinally三、使用Promise解决回调…

qiankun微应用之间、主微应用之间相互跳转方式总结与实践

一、子应用互相访问 1、背景 &#xff08;1&#xff09;未来可能需要做不同子应用菜单的合并&#xff0c;如在bi应用下的侧边栏或者别的地方&#xff0c;需要跳转到数据治理的数仓主题里&#xff0c;或者涉及到子应用值改变&#xff0c;其他应用也需要使用&#xff1b; &…

【JWT鉴权】如何来写一个token令牌认证登录?

目录一. &#x1f981; 话题引入1.2 什么是JWT&#xff1f;二. &#x1f981; 技术体现2.1 引入依赖2.2 编写JWT工具类2.3 编写登录方法2.4 编写JWT拦截器验证令牌2.5 编写要配置拦截的接口三. &#x1f981; 话题终结一. &#x1f981; 话题引入 在做项目过程中&#xff0c;我…

vue-element-ui前后端交互实现分页查询

大体思路&#xff1a; ①添加element-ui分页组件 ②在data里定义几个参数用来存放当前页&#xff0c;每页条数&#xff0c;条目总数以及存放后端分页查询的结果 ③后端使用分页查询&#xff0c;controller层接收当前页以及每页条数的参数 ④前端编写方法发送请求到controll…

用jsp实现简单登入注册界面功能(css美化)(软件idea)

思路&#xff1a;创建登入界面&#xff08;login&#xff09;&#xff0c;再创建登入成功与登入失败界面&#xff08;loginsuccess与loginfail&#xff09;&#xff0c;再创建注册成功界面&#xff08;registersuccess&#xff09;与注册界面&#xff08;register&#xff09;以…

用HTML实现简易版计算器

计算器功能&#xff1a;实现了加减乘除、清零、回退、四则运算、幂运算、根式运算等等。 运行结果如下&#xff1a; 引入的图片&#xff1a;back.png HTML部分&#xff1a;用table表格添加计算器的按键&#xff0c;给每个按键设置一个相应的单击事件&#xff0c;点击一个按键后…

RuoYi-Vue——图标使用

使用若依的小伙伴们&#xff0c;是否有遇到找图标的烦恼。若依框架里图标分两种&#xff0c; 1.用在表格中的图标&#xff1a; 2.用在菜单及个人信息的图标&#xff1a; 下面我就针对这两种图标给大家总结一下。 1.表格图标&#xff08;ElementUI图标Icon&#xff09; 若依的表…

【JavaScript】五个常用功能/案例:判断特定结尾字符串 | 获取指定字符串 | 颜色字符串转换 | 字符串转驼峰格式 | 简易购物车

CSDN话题挑战赛第2期 参赛话题&#xff1a;学习笔记 &#x1f5a5;️ NodeJS专栏&#xff1a;Node.js从入门到精通 &#x1f5a5;️ 博主的前端之路&#xff1a;前端之行&#xff0c;任重道远&#xff08;来自大三学长的万字自述&#xff09; &#x1f5a5;️ TypeScript知识总…

layui数据表格的使用(前端和后端)

数据表格&#xff08;纯前端&#xff09; 快速使用 首先需要引入layui的css和js <link rel"stylesheet" href"../static/layui/css/layui.css"> <script src"../static/layui/layui.js" charset"utf-8"></script>…

如何搭建vue框架-1

提示&#xff1a;前端新人&#xff0c;初来乍到&#xff0c;若文章写的不好大家多包涵。 文章目录前言一、vue是什么&#xff1f;二、ElementUI是什么&#xff1f;三、搭建前的准备四、安装步骤1.安装webpack2.安装vue-cli3.通过vue-cli构建项目4.启动项目5.其他总结前言 基于…

element-ui表格编辑

前言&#xff1a; 准备&#xff1a; element-uivue3vscode 实现步骤&#xff1a; 数据标定打开激活编辑保存 1. 设定需要编辑的表格单元格是否编辑标识 在请求后台表格数据时进行一个二次包装&#xff0c;如果后端已经处理则不需要在进行包装&#xff08;此处包装是否编辑…

手撕前端面试题【javascript~模板字符串、类继承、参数解析器、生成页码等】

前端的那些基本标签&#x1f353;&#x1f353;模板字符串&#x1f353;&#x1f353;类继承&#x1f353;&#x1f353;参数解析器&#x1f353;&#x1f353;生成页码&#x1f353;&#x1f353;js中哪些操作会造成内存泄漏?html页面的骨架&#xff0c;相当于人的骨头&#…

react router6.x官方DEMO

Tutorial v6.4.2 | React Router 初始化项目 import React from "react"; import ReactDOM from "react-dom/client"; import {createBrowserRouter,RouterProvider,Route, } from "react-router-dom"; import "./index.css";const …

用CSS设置颜色、背景和图像效果

&#x1f4dc;个人简介 ⭐️个人主页&#xff1a;微风洋洋&#x1f64b;‍♂️ &#x1f351;博客领域&#xff1a;编程基础&#x1f4a1;,后端&#x1f4a1;,大数据,信息安全 &#x1f345;写作风格&#xff1a;干货,干货,还是tmd的干货 &#x1f338;精选专栏&#xff1a;【J…

js数组常用方法(19种)|你会的到底有多少呢?

一、改变原数组的方法 1.push&#xff08;&#xff09; 末尾添加数据 语法: 数组名.push(数据) 作用: 就是往数组末尾添加数据 返回值: 就是这个数组的长度 //push var arr [10, 20, 30, 40] res arr.push(20) console.log(arr);//[10,20,30,40,20] console.log(res);//52. …

【Cesium】使用TLE轨道两行数计算轨道信息,并生成CZML格式文件

TLE为轨道两行数&#xff0c;简单的说是用两行数字表示轨道的相关信息&#xff0c;本文即用轨道两行数来计算任一时刻卫星的位置信息和速度信息&#xff0c;并生成CZML文件能够读取的格式 1、satellite.js库简介 简而言之&#xff0c;satellite.js库可以根据TLE轨道两行数&…

vue 项目适配笔记本1920*1080 125%缩放

前言 在台式机上开发pc端项目时&#xff0c;由于是1920*1080的分辨路和100缩放&#xff0c;看起来是没有问题。在笔记本上有问题 因为现在很多14寸的笔记本&#xff0c;出厂默认就是125%或150%的显示。导致很多时候我们的项目&#xff0c;自己开发的时候都是按照100%比例来开发…