vue脚手架 快速搭建项目

2023-10-26

什么是vue-cli

是vue官方提供的脚手架工具。脚手架工具简单讲就是自动将项目需要的环境、依赖等信息都配置好。

使用vue-cli搭建项目步骤

是vue官方提供的脚手架工具。脚手架工具简单讲就是自动将项目需要的环境、依赖等信息都配置好。

1.安装NodeJs(下载node.js到本地)

菜鸟教程已经给我们说明的很清楚了,按照教程选择我们的电脑系统安装教程进行安装即可,安装完后便可在终端查询版本号。教程链接:http://www.runoob.com/nodejs/nodejs-install-setup.html

2.安装npm

打开cmd控制台,输入 npm install 命令。
运行结果如下:
在这里插入图片描述

3.安装淘宝npm镜像

使用淘宝镜像的命令:npm install -g cnpm --registry=https://registry.npm.taobao.org

4.全局安装vue-cli脚手架

1.新建一个文件夹用 Vscode打开, 在终端里输入 npm install -g vue-cli
在这里插入图片描述
提示:如果vscode中 提示‘npm’不是内部或者外部命令

 1:检查node.js是否下载好,

检查方法:打开node.js,输入命令  path 和 node --version 和 npm -v

2; 检查环境变量是否正确;

检查方法:1:鼠标右键点击 ‘计算机’

2:‘属性’ ---- ‘高级系统设置’ ----- ‘环境变量’ ------- 查看用户变量中的 'path’是否和自己下载的地址相同,不同的话新建一个变量把node.xex这个地址新建在里面;

最后----------重启 vscode即可。

2.完成后在终端里继续输入 vue init webpack Project.UI,根据个人需求选择安装的模块。
在这里插入图片描述

5.测试环境是否搭建成功

1.在终端输入cd Project.UI指令进入该目录。
在这里插入图片描述
2.在终端输入npm run dev指令启动项目(根据package.json中的数据来启动)

3.在浏览里输入:localhost:8080,运行起来后的效果却是如下图所示:
在这里插入图片描述

有很多朋友问如何去掉地址栏的http://localhost:8080/#/中的/#/
解决方案如下:

	1、打开src下面的router文件夹里面的index.js或者是router.js

	2、把mode模式改成history就可以了

	3、不影响任何功能
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue脚手架 快速搭建项目 的相关文章

  • UnityHub打不开自己的项目的一个可能

    自己的unity项目前几天还一切正常 突然就打不开了 从unity跳转不到hub 从hub点项目转了几圈就没反应了 也没办法新建项目 看了网上很多解决方法 重新登录 没反应 删了unityhub重新下载 没反应 关闭防火墙重新插usb接口这
  • 关于Typora初次下载输入代码时代码行号不显示的问题

    关于Typora初次下载输入代码时代码行号不显示的问题 我刚用Typora的时候 打开代码块发现居然不显示行号 以下是我打开代码块内行号的显示的步骤 我刚用Typora的时候 打开代码块发现居然不显示行号 以下是我打开代码块内行号的显示的步
  • dataframe按照某一列的取值进行拆分

    dataframe按照某一列 假设列名为 columnname 的取值进行拆分 即 比如dataframe的第一列只有 a b 两种取值可能 就把dataframe拆分成两个小的dataframe 一个dataframe的第一列只取 a 另

随机推荐

  • 【WiFi】Hostapd工作流程分析

    目录 1 Hostapd概述 2 Hostapd代码框架 3 Hostapd各种命令配置工具 4 hostaod的主函数 5 hostaod代码分析 1 Hostapd概述 Hostapd是一个运行在用户态的守护进程 可以通过Hostapd
  • JavaScript 入门基础 - 流程控制(四)

    JavaScript 流程控制 分支和循环 文章目录 JavaScript 流程控制 分支和循环 1 什么是流程控制 2 顺序流程控制 3 分支流程控制 之 if语句 3 1 什么是分支结构 3 2 if 语句 3 2 1 if 语句基本理
  • IPV6组播地址

    1 IPV6组播地址 RFC4291定义组播地址格式如下 8 4 4 112 11111111 flgs scop group ID
  • nas文件服务器web接口,nas配置web服务器

    nas配置web服务器 内容精选 换一换 通过Web浏览器登录资源 会话页面载入失败 提示由于服务器长时间无响应 连接已断开 请检查您的网络并重试 Code T 514 云堡垒机系统与资源服务器之间网络连接不稳定 导致连接断开 云堡垒机系统
  • 计蒜客 蒜头君的新游戏(DP)

    蒜头君的新游戏 include
  • 构造函数设置为private,会怎样。

    构造函数设置为private 会怎样 1 无法静态的创建对象了 即不能通过 A a这种方式创建对象了 只能通过在类的内部的静态成员函数中new一个对象 动态的创建对象 include
  • NotScripts扩展在Chrome中禁用网页JavaScript

    经常上网查找资料的朋友 应该对于那些无法复制网页内容的网站是深有感触的 由于这些网站作者为保护自己的网站内容不被他人抄袭 使用了JavaScrip来禁用鼠标右键复制功能 解决办法当然就是用浏览器禁止使用网页的JS加载或者生效了 如果你经常使
  • Hive窗口函数大全

    Hive窗口函数 一 偏移量函数 lag lead 二 窗口分析函数 first value last value 三 排序函数 rank dense rank row number 一 偏移量函数 lag 语法 lag col n def
  • linux网络编程实现投票功能

    投票系统 1 说明 写了一个投票系统 过程是先配置好服务器 在写一个网上投票功能 要实现网上投票功能 其实功能实现还是很简单的 麻烦一点的在于过程比较繁杂 要做的东西还是挺多的 2 过程 第一步 配置httpd服务器 先配置好httpd服务
  • 决策树

    这篇博客用来简要介绍决策树算法 DecisionTree 决策树是机器学习中常用的一种算法 它即可用于解决分类问题 也可用于解决回归问题 在这篇博客我们只介绍分类决策树 决策树顾名思义是一种树形结构 而我们的任务就是想办法构建出这样一颗树用
  • 机器学习入门实战加州房价预测

    目录 1 快速搭建运行环境 2 快速构建项目 2 1 导入训练集 2 2 安装函数库 2 2 1 安装numpy 2 2 2 安装pandas 2 3 构建特征集和标签 2 4 导入数据集拆分工具sklearn 2 5 导入线性回归算法模型
  • Springboot集成security,自定义@Anonymous标签实现免登录,免鉴权

    首先 项目springboot使用了2 6 8版本 集成security的过程中 使用了比较严格的自定义策略 任何请求都需要认证和授权 判断用户是否有查询改接口的权限 并且提供了配置或者注解两种方式提供匿名访问的接口 第一种通过配置 第二种
  • kdtree备份

    库在这里 这个很好用 例子 gcc Wall g o test test c libkdtree a include
  • keil出现 “st-link usb communication error“的解决方法,“升级”固件库

    1 如题 我用keil使用ST LINK下载程序的时候 发现报错st link usb communication error 2 明明上周还是可以用的 这周就不行了 想一想问题出在哪里 原来我在另外一块开发板上下载程序也是一直报错 kei
  • 生成android toolchain

    1 安装ndk 推荐的方法是先安装android studio2 2及以上版本 然后通过sdk manager安装ndk 如果是ubuntu系统 强烈建议64位的14 04及以上系统 2 在Android目录 android studio安
  • 博哥爱运维教程&视频

    文章目录 第1关 K8s一窥真容 第2关 部署安装包及系统环境准备 第3关 二进制高可用安装k8s生产级集群 第4关 K8s最得意的小弟Docker 第5关 K8s攻克作战攻略之一 K8s的API对象 所有怪物角色列表 Namespace
  • AXI总线介绍

    AXI总线介绍 参考文档 UG761 AXI Reference Guide v14 3 AXI入门 深入AXI总线 一 深入AXI总线 二 AXI是什么 axi是一种总线协议 他是ARM AMBA Advanced Microcontro
  • Unity Shader: Shader粒子广告牌

    广告牌效果既是不论物体与摄像机的角度 被渲染物体总是正对着摄像机 此技术广泛利用于粒子效果中 例如Unity内置的Particle System 下文将要介绍如何在Shader中实现广告牌效果 在视空间对顶点进行重定位 图1 摄像机绑定在立
  • 关于实现shiro权限拦截遇到的一些坑

    目的 通过拦截器实现对部分请求的拦截做自定义的鉴权处理 鉴权不通过时实现json返回 bug 通过继承 PermissionsAuthorizationFilter 实现了自定义的鉴权处理 但是前端报错302并做了请求转发 配置 1 在 S
  • vue脚手架 快速搭建项目

    使用vue cli vue脚手架 快速搭建项目 什么是vue cli 使用vue cli搭建项目步骤 1 安装NodeJs 下载node js到本地 2 安装npm 3 安装淘宝npm镜像 4 全局安装vue cli脚手架 5 测试环境是否