首页 > 其他分享 >Vue安装

Vue安装

时间:2023-07-15 21:47:33浏览次数:31  
标签:npm Vue cli webpack vue install 安装

安装vue及脚手架

1.安装vue.js

npm install vue -g 或者 cnpm install vue -g

查看安装的vue信息:

npm info vue 或者 cnpm info vue

image-20230715211634838

2.安装webpack模板

安装webpack

npm install webpack -g

  • 安装webpack-cli:

    npm install --global webpack-cli

    安装成功后可使用webpack -v查看版本号。

    image-20230715211817696

3.安装脚手架vue-cli

npm install -g @vue/cli

用这个命令来查看其版本是:

vue --version

vue -V

升级全局的 Vue cli 包:

npm update -g @vue/cli

安装vue-router

npm install -g vue-router

4.vue-cli2.x 创建vue项目
1)创建项目

image-20230715211958545

image-20230715212055875

image-20230715212136431

2)进行一些配置:

image-20230715212241913

image-20230715212257490

image-20230715212309447

3)运行项目并按照提示打开网址

image-20230715212509922

另一种进入终端的方法:

image-20230715212647331

image-20230715212745313

标签:npm,Vue,cli,webpack,vue,install,安装
From: https://www.cnblogs.com/wangkaixuan123/p/17556999.html

相关文章

  • vue--day16---列表排序
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>watch与computed实现列表过滤</title>......
  • vue-day16---watch与computed实现列表过滤
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>watch与computed实现列表过滤</title>......
  • VUE WebSocket连接成功后,立即发送一个token
    ws=newWebSocket(ws://${location.host}/xxx)ws.onopen=()=>{ws.send(JSON.stringify({headers:{Authorization:Bearer${token}}}));isConnected.value=true;}查看方法:在消息数据里(不是标头里)......
  • vue3 封装api接口
    新建axiosj.tsimportaxiosfrom'axios';import{showMessage}from"./status";//引入状态码文件import{ElMessage}from'element-plus'//引入el提示框,这个项目里用什么组件库这里引什么//设置接口超时时间axios.defaults.timeout=60000;//请求地址,......
  • vite-plugin-vue-images——Vite自动导入图片
    vite-plugin-vue-images——Vite自动导入图片在Vue2时我们经常会这样引用图片:<img:src='require("地址")'/>但在Vite中不支持require了,引用图片变成了下面这样:<template><img:src='imgUrl'/></template><scriptsetup>importimgUrl......
  • openEuler(华为欧拉)使用docker安装wine 8+版本,支持32位程序
    安装docker参考:openEuler安装docker下载wine镜像wine的docker镜像,支持i386点击上述网址,查看、选择你想要安装的版本,例如8.0.1.使用以下命令安装:dockerpulltianon/wine:8.0.1启动wine容器下载完成后,使用以下命令启动:dockerrun-it-eDISPLAY=$DISPLAY-v$(pwd):/mnt......
  • vue中$set和$forceUpdate强制更新视图层的区别
    $forceUpdate原理:调用notify() 强制视图更新  $set原理:defineReactive(this.data数据,要劫持得数组索引或对象键,默认值)   建立响应式依赖  指定数据更新使用场景:如果data数据的层级过深,导致无法响应式显示解决方法一:$set()this.$set(target,key,value)解......
  • vue3 为什么使用 hooks?
    目的为了解决在组件中共享逻辑和状态的问题。 hooks提供了一种更简洁和直观的方式来共享逻辑和状态。vue3中的hooks是基于函数的组件模型,通过在函数组件内部使用特定的hook函数来实现。每个hook函数都有特定的用途,例如:useState用于创建和管理状态,useEffect用于......
  • tomcat 8.5 的安装配置
    下载软件包链接:https://pan.baidu.com/s/1VP9MGxjpWm3gawhxjIvYrg提取码:xooe--来自百度网盘超级会员V6的分享1、注意解压还要拿到最里面的文件夹,存放的软件目录不能是中文的 同样的将上面文件路径复制粘贴到记事本,等下要用CATALINA_HOMED:\mysoft\apache-tomcat-8.5.15......
  • jdk1.8 的的安装和配置
    软件包下载链接:https://pan.baidu.com/s/1KNdKTtesoVhpmVsoXaz-dg提取码:54qe--来自百度网盘超级会员V6的分享1、打开运行软件 2、安装引导下一步 3、默认安装在c盘符,比较小,占不了多少空间 4、jre的安装路径 5、安装结束 6、找到安装路径,将路径存放在记事本中,以......