VUE安装使用手册

于 2024-08-11 23:16:38 发布
阅读量1.1k 收藏 21
点赞数 24
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_54523931/article/details/141113691
版权

1 在cmd窗口创建VUE工程

  1. 打开运行窗口
    在这里插入图片描述
    输入 npm -v 命令，检查npm是否可用，注意v是小写的
    如果显示版本就是OK的，这里如果是8.5.0版本也是正确的！
    如果没有的话请先去官网下载并安装
    https://nodejs.org/
    在这里插入图片描述
  2. 配置npm源
    npm(Node Package Manager)是 Node.js 的默认包管理和依赖管理工具
    它允许用户轻松地安装、更新和管理 Node.js 应用程序所需的模块（也称为“包”）
  3. 确认npm命令可用后，就可以配置npm源
  • nmp源（即npm仓库，称之为：registry）默认是境外服务器
  • 在国外访问速度较慢，通常在初次使用时，应该将npm源更换为国内的服务器地址
  • 例如使用 https://registry.npmmirror.com作为npm源
    使用命令：npm config set registry https://registry.npmmirror.com

  1. 配置后可以使用get命令查看npm源
    npm config get registry
    注意：这个命令只能获取到你配置的源，无法检查是否正确！请认真检查url

  2. 安装VUE CLI

  3. 配置好npm源后，就可以安装VUE CLI(VUE脚手架)了,此过程将从仓库服务器中下载VUE Cli，通常耗时30秒至5分钟左右。
    命令： npm install -g @vue/cli
    只要安装显示的文字中没有出现ERROR就可以，警告(提示更新npm版本或提示某些软件版本偏旧等)都可忽略
    注意：无论你使用哪种操作系统，必须保证当前登录的用户具有最高访问权限，例如，在Windows操作系统中，请使用管理员模式的命令提示符，并且，不要使用Power Shell，在Mac OS中，请使用 sudo来执行以上命令。
    在这里插入图片描述
    @vue/cli是Vue官方提供的一个全局模块包(得到vue命令), 此包用于创建脚手架项目
    @vue/cli的好处：开箱即用，支持webpack/babel/css/less/开发服务器支持

  4. 安装完毕后，可以验证一下，命令： vue -V 注意：这里的V是大写的！
    可以看到当前的VUE Cli：@vue/cli 5.0.8

创建VUE CLI工程
通常用vue命令来创建VUE CLI工程，并且会将工程创建在执行命令时的位置，所以，可以先进入准备存放项目的文件夹再创建项目

  1. 建议切换到其他盘，不要在系统盘里存放项目，命令： d:
  2. 在对应的盘下创建一个文件夹，当做VUE项目的工作空间，命令： mkdir Vue-Workspace
  3. 进入到刚刚创建好的文件夹，命令： cd Vue-Workspace
  4. 创建VUE项目，格式：vue create 项目名，命令： vue create vue-project-01
  5. 下面即将进入创建项目时的各项选项配置，一定要慢，不要连续敲回车，会自动选择下一个选项的默认项！按图示步骤操作即可：
  • 按上下键移动
  • 空格键选中 再按一次取消选中
  • 回车键进入下一项配置
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
2 在IDEA中创建VUE工程
1 IDEA创建-启动-停止VUE工程步骤

  1. 在IDEA中打开下方的Terminal工具,输入命令
  2. 首先输入 npm 命令,如图所示,如果提示"不是可运行的程序或批处理文件",需要重启IDEA

在这里插入图片描述
3. 创建v1项目

在这里插入图片描述
4. 进入到v1文件夹下,并启动项目

在这里插入图片描述npm run serve命令启动工程的服务时，会变异打包此工程，当提示如下消息时，表示工程已成功启动：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
2 可能出现的问题与解决方案
2.1 浏览器显示无法访问或拒绝访问
原因：服务停止了
解决方案：服务只有启动才可以访问，需要启动服务后再进行测试

在这里插入图片描述
2.2 vue/cli 安装失败，让你升级到npm 10.2.3
解决方案：实际执行了update升级指令也是不行的，直接安装与node -V 16版本匹配的vue/cli版本 5.0.8
指令：npm install -g @vue/cli@5.0.8
2.3 启动项目时满屏 npm ERR!
在这里插入图片描述
原因：可能未在VUE工程项目文件夹下启动项目
解决方案：进入VUE项目文件夹，再启动
在这里插入图片描述
2.4 ‘vue-cli-service’ 不是内部或外部命令，也不是可运行的程序或批处理文件。
拉取或拷贝项目后，启动项目，但出现如上提示

在这里插入图片描述
原因：可能是项目里没有node_modules
解决方案：执行 npm install 命令，再次启动项目即可
在这里插入图片描述
2.5 npm:无法将“npm”项识别为…
在这里插入图片描述
解决方案：

  1. 确保自己的Node.js以及npm配置无误
  2. 重新启动IDEA，还不行的话重新启动电脑
    2.6 IDEA的Terminal终端没办法敲命令,或者显示无法加载vue.ps1
    在这里插入图片描述
    原因：IDEA打开了Windows新版本的命令行工具powershell，并没有打开cmd
    解决方案：
  3. 打开IntelliJ IDEA。
  4. 进入设置：File > Settings（在Mac上是IntelliJ IDEA > Preferences）。
  5. 在设置窗口的左侧，导航至Tools > Terminal。
  6. 在右侧的Shell path字段中，你需要输入CMD的路径，通常是C:\Windows\System32\cmd.exe。
  7. 点击Apply然后点击OK来保存你的更改。

在这里插入图片描述
完成这些步骤后，注意要在IDEA中打开一个新的终端窗口，就会启动CMD而不是PowerShell
如果遇到了比如权限不足（如错误CreateProcess error=740）需要以管理员权限运行IDEA，或者确保你的用户账户有足够的权限运行CMD。
在这里插入图片描述
3 关于VUE Cli
在使用VUE之前，你需要：

  • 在你的电脑上安装Node.js,并配置环境变量
  • 在你的电脑上配置npm源，使得它可以更快速、更稳定的下载所需的资源
  • 在你的电脑上安装VUE Cli
  • 以上操作对于每台电脑都是一次性操作
    4 修改项目启动端口号
    默认端口号8080，但此端口号使用频率高，存在被占用的情况，所以我们可以修改端口号：
  1. 打开package.json配置文件
  2. 在约第6行的位置添加 --port 9090 ，9090就是我们新修改的端口号

在这里插入图片描述
3. 重新启动我们的项目，可以看到端口号已被改成了9090
在这里插入图片描述
[图片]
4 安装Vue.js插件

  1. 打开File下的设置Settings，找到插件Plugins，在市场中搜索vue,如果没有安装，点击Install安装
    在这里插入图片描述
  2. 安装完毕后可以在Installed中看到已安装的插件
    在这里插入图片描述
  3. 点开App.vue文件，如果上面有如下提示，也是需要安装插件
    在这里插入图片描述
    VUE Cli 热部署测试
  • VUE Cli工程启动的服务支持热部署
  • (热更新，即：当保存对源代码的修改后，会自动重新编译打包并覆盖原本已经启动的服务中的文件)
  1. 打开App.vue文件，可以在里面添加内容
    在这里插入图片描述
  2. 点击项目访问链接可以看到网页内容立即发生改变
    在这里插入图片描述
    试试看：
    启动项目，在浏览器中访问主页，在IntelliJ IDEA中打开App.vue并修改其中的显示文本，切换回浏览器，你会发现浏览器中显示的页面已经自动刷新为你修改后的效果
    3 VUE的使用
    1 "搭积木"的开发体验
  • 默认的主页是由以下3个文件完成显示的：
    • /App.vue
    • /views/HomeView.vue
    • /components/HelloWorld.vue
      试试看：
      分别修改以上3个文件中的显示文本，看看浏览器的哪些区域发生了变化

在这里插入图片描述
2 App.vue代码讲解
router-link类似于a标签，to属性在/router/index.js中有配置

在这里插入图片描述

<!--HTML写在template标签中-->
<template>
  <h1>热部署测试aaa</h1>
  <nav>
    <!-- 脚手架工程中的router-link相当于超链接a标签 -->
    <!-- 区别:超链接a跳转时页面整体刷新 router-link跳转时页面不会整体刷新，局部刷新     -->
    <!-- /相当于根，点Home时url为：http://localhost:9090/ -->
    <router-link to="/">Home主页</router-link> |
    <!-- 点About时url为：http://localhost:9090/about -->
    <router-link to="/about">About关于</router-link> |
    <router-link to="/other">其他关于</router-link>
  </nav>
  <!--  router-view用来表示可变区域  -->
  <router-view/>
</template>
<!--CSS写在style标签中-->
<style>
/*public下的index.html中的内容设置样式*/
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  /*让文字不要有锯齿，更平滑*/
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
/* 设置上面导航栏的内间距 */
nav {
  padding: 30px;
}
/* 设置上面导航栏链接的文字颜色与字重 */
nav a {
  font-weight: bold;
  color: #2c3e50;
}
/* 设置激活的超链接文字用不同的字体颜色 */
nav a.router-link-exact-active {
  color: #42b983;
}
</style>\

3 HomeView.vue代码讲解

<!--HTML内容写在template标签中-->
<template>
  <div class="home">
    <!-- logo图片 -->
    <img alt="Vue logo" src="../assets/logo.png">
    <img alt="Vue logo" src="../assets/logo.png">
    <!--  vue自带的自定义的组件HelloWorld 具体:/components/HelloWorld.vue -->
    <HelloWorld msg="Welcome to Your Vue.js App欢迎小可爱"/>
  </div>
</template>
<!--JavaScript内容写在script标签中-->
<script>
// @ is an alias to /src
// 导入自定义组件HelloWorld后才能使用
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  components: {
    HelloWorld
  }
}
</script>

4 index.js代码讲解

  • 假如to里写的path是"/",那么就会显示对应component的HomeView.vue中的内容
  • 假如to里写的path是"/about",那么就会显示对应component的AboutView.vue中的内容
    在这里插入图片描述
    类似于后端工程在方法上加:
@RequestMapping("/v1/users/reg")
localhost:8080/v1/users/reg就会找此方法提供服务


import { createRouter, createWebHistory } from 'vue-router'
//预加载：提前加载(只有这个是预加载)
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    //箭头函数：懒加载，用到了再加载
    component: () => import( '../views/AboutView.vue')
  },
  {
    path: '/other',
    name: 'other',
    //箭头函数：懒加载，用到了再加载
    component: () => import( '../views/OtherView.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

5 新view.vue 的创建方式

  1. 在 v1/src/App.vue中添加新view文件的router-link链接

在这里插入图片描述
2. 在v1/src/views文件夹下创建一个新的VueComponent(也就是.vue文件)
在这里插入图片描述
3. 编写新创建好的.vue文件

  1. template标签中放的是HTML
  2. style标签中放的是CSS
  3. script标签中放的是JS
    注意:vue3的script开始标签中必须要有setup,否则代码不生效！

在这里插入图片描述

在这里插入图片描述
4. 还需要在v1/src/router/index.js文件中配置路由跳转的路径

  1. path就是App.vue中router-link标签中to属性的值
  2. 箭头函数加载的就是对应的.vue文件的路径
    在这里插入图片描述
  3. 写完可以启动项目访问：http://localhost:9090/ 进行测试，如果看到了下图所示的内容，则表明配置成功了
    在这里插入图片描述
Cyeso
关注
创建vue项目
m0_45309753的博客
10-18 683
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、安装node.js环境2.安装vue-cli脚手架3.创建vue项目总结 前言 创建vue项目的基本配置 一、安装node.js环境 在用Vue.js构建大型应用的时候通常使用NPM安装方法，NPM能更加方便快捷的搭建项目，例如在项目当中我们常常需要安装各种插件以及打包工具等。 1.从node.js官网下载并安装node，安装过程很简单，一直点下一步就ok了，安装完之后，我们通过打开命令行工具（win+R）,输入 node
vue新手入门使用手册
fangfangchonga的博客
09-29 337
一、Vue搭建项目 1、创建vue项目：vsCode 创建Vue项目_lxsz0214的博客-CSDN博客 2、修改config下的dev.env.js（填写后台IP地址）、index.js（host填写自己的IP地址） 3、Element UI安装 安装Element：npm i element-ui -S 引入Element：在 main.js 中写入以下内容： import Vue from 'vue'; import ElementUI from 'element-ui'; impor
创建Vue项目详细教程 (引入Element-plus 和 ArcoDesign)
最新发布
qq_20770569的博客
06-29 1246
Vue.js（通常简称为Vue）是一个开源的渐进式JavaScript框架，用于构建用户界面。它由尤雨溪（Evan You）在2014年创建并维护至今。Vue的核心库专注于视图层，易于学习且集成到现有项目中，同时也能够为复杂的单页应用程序（SPA）提供强大的功能。
如何搭建一个vue项目(完整步骤)
y2020520的博客
05-16 1万+
Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；最后附上demo地址：https://github.com/yanxulan/vue-demo.git。参考：https://www.cnblogs.com/yanxulan/p/8978732.html。d：输入ip： http://localhost:8010/#/first，查看页面效果。
Idea创建vue项目
热门推荐
qq_46017272的博客
04-01 2万+
一、首先去官网下载node.js，并安装 node.js下载地址：Download | Node.js 我在之前就安装过，选择的是Windows64 16.14.1版本，可结合自己的系统选择 下载完成后，默认进行安装即可，安装完node后，node中会自带npm，便于以后的安装下载 我们可以在cmd中查看node版本，输入node -v 二、安装vue-cli脚手架 在cmd中输入命令：npm install -g @vue/cli@4.5.15(我这里安装的是这个版本，可以自行选.
idea创建VUE项目
qq_28397787的博客
08-03 1万+
VUE项目的创建
vue 安装使用
yangxiaodong88的博客
04-13 1837
https://blog.csdn.net/zhangpengself520/article/details/72722491 https://blog.csdn.net/zzy123654321/article/details/79191331 https://www.cnblogs.com/wangqiao170/p/8664510.html 遇到问题 # Installing pr...
vue2.0中文使用手册
09-06
这份"vue2.0中文使用手册"应该是详细介绍了Vue 2.0的核心概念、API以及最佳实践，对于学习和掌握Vue 2.0至关重要。 首先，Vue 2.0的核心特性包括组件化、响应式数据绑定和虚拟DOM。组件是Vue的核心，它允许开发者将...
systemvue 用户手册
01-07
在用户手册中，详细的介绍了SystemVue软件的安装、配置、使用等操作。安捷伦科技是美国的一家科技公司，专注于测量、测试、监控和分析等领域的技术研究和产品开发。SystemVue也成为了该公司在电子设计自动化（EDA）...
vue2.0中文手册API
05-25
这个"vue2.0中文手册API"是Vue 2.0的中文文档，对于学习和理解Vue的核心概念、组件化、指令、过滤器、插槽等内容非常有帮助。 1. **核心概念** - **虚拟DOM**：Vue采用虚拟DOM技术，通过计算差异并最小化实际DOM...
vue.js 2.0中文离线手册（CHM版）
04-21
Vue.js 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue ...Vue.js 不支持 IE8 及其以下版本，因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。 Vue.js 支持所有兼容 ECMAScript 5 的浏览器。
idea创建Vue项目
weixin_52813800的博客
05-13 675
（方法1的项目本人的idea是直接创建vue3版本，方法2可以选择vue2 / vue3，可以在package.json查看vue版本）
用idea创建vue项目
m0_67677436的博客
05-12 1万+
目录 一、安装node.js （1）下载安装包 （2）测试node.js是否安装成功 （3）安装vue和全局vue-cli 二、idea安装vue.js插件 三、创建vue项目 四、修改配置文件 五、配置idea运行的环境 一、安装node.js 官网下载下载地址：Download | Node.js （1）下载安装包 安装过程很简单，全部next即可。 （2）测试node.js是否安装成功 在键盘按下win+R键，输入cmd回车，打开cmd窗口； 查看版本操作：node.
使用IDEA创建Vue项目
梦里逆天的博客
06-08 1万+
https://www.cnblogs.com/qianyou304/p/11589548.html
@vue-cli脚手架新建项目
成在坚持，贵在坚持
10-14 177
@vue-cli脚手架 安装 安装脚手架：npm install -g @vue/cli ，如果已经安装vue-cli需要先删除npm uninstall vue-cli -g 创建项目 创建项目：vue create hello-world 下载依赖 //安装vue-router npm install vue-router //安装vuex npm install vuex 配置vue-router import Vue from 'vue' import VueRouter from 'v
安装vue
weixin_44111797的博客
10-25 826
①安装node环境 下载node.js 一直next(可以手动改一下安装的位置) 安装后用 node -v 和 npm -v检验一下 (npm包管理器是集成 在node中的，所以安装了node也就有了npm) ②安装脚手架 使用淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org 未安装镜像：npm install -g @vue/cli 如果安装了taobao镜像：cnpm install -g @vue/cli .
vue安装
weixin_48062613的博客
03-04 228
安装node.js 官网下载地址：添加链接描述 检测是否配置环境变量在cmd窗口中输入node -v 如果没有显示版本号，则进入环境变量中将你下载文件的位置配入path中 下载淘宝镜像，可以加快下载速度，npm指令从外网速度较慢 npm install -g cnpm --registry=https://registry.npm.taobao.org 在cmd窗口中输入cnpm -v 如果没有显示，则同样需要配置。找到你下载cnpm.exe的位置 将改地址配入环境变量中D:\node..
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值