首页 > 其他分享 >VUE入门

VUE入门

时间:2023-05-22 18:55:59浏览次数:47  
标签:npm VUE 入门 cnpm js vue 安装 cli

什么是 Vue?

Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架。

它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、

组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。

vue的两大核心

  • 声明式渲染:Vue 基于标准 HTML 拓展了一套模板语法,使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。

  • 响应性:Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM(类似于前端html标签处理大量文本)。

下载node.js

下载vue

1、安装 Node.js

Node.js 官网:https://nodejs.org/en/download

2、配置默认安装目录和缓存日志目录

3、配置环境变量

4、配置淘宝镜像

  • 安装 cnpm
  • npm install -g cnpm --registry=https://registry.npm.taobao.org
      验证镜像是否安装成功
  • cnpm config get registry

5、安装 vue 和脚手架

  • 安装 vue.js
  • cnpm install vue -g

  • 验证安装是否成功
  • 淘宝镜像:cnpm info vue
  • 普通镜像:npm list vue

  • 安装 webpack 模块

  • cnpm install webpack -g

  • 安装 webpack-cli

cnpm install --global webpack-cli

6、安装vue-cli 3.x

cnpm install @vue/cli –g

7、创建 vue 3 项目

  • 以管理员身份打开 cmd 控制台(不用管理员创建会报错),进入想要创建项目的目录,开始创建项目

  vue create [项目名称]

  • 根据给出的提示进入项目目录,运行项目

  • npm run serve

 

查询vue版本和vue-cil(脚手架)版本

查询vue版本:

查询vue-cil 脚手架版本:vue -v

查询npm版本:npm -v

卸载命令vue2:
npm uninstall vue -cli -g

卸载命令vue3:

npm uninstall @vue/cli -g

 

标签:npm,VUE,入门,cnpm,js,vue,安装,cli
From: https://www.cnblogs.com/linux-3411-java/p/17420914.html

相关文章

  • vue3遇到的问题集合
    1.vue3打包设置 2.vue3路由配置history 3.vue3屏蔽eslint ......
  • 矩阵入门
    矩阵向量与矩阵在线性代数中,向量分为列向量和行向量。向量也是特殊的矩阵,行向量可以看作是一个\(1\timesn\)的矩阵,例如下面这样:\[\begin{bmatrix}1&2&3&4&5\end{bmatrix}\]列向量可以看作是一个\(n\times1\)的矩阵,例如下面这样:\[\begin{bmatrix}1\\2\\3\\4\\5\e......
  • vue3 左侧菜单栏默认展开关闭
    <el-menuclass="mainMenu"routerbackground-color="transparent"active-text-color="#fff":unique-opened="true":collapse-transition="false"......
  • vue中实现文件上传下载的三种解决方案(推荐)
    ​ 一、概述 所谓断点续传,其实只是指下载,也就是要从文件已经下载的地方开始继续下载。在以前版本的HTTP协议是不支持断点的,HTTP/1.1开始就支持了。一般断点下载时才用到Range和Content-Range实体头。HTTP协议本身不支持断点上传,需要自己实现。 二、Range  用于请求头......
  • Vue3+Vite部署到Netlify
    前言本项目的前端是使用Vue3技术。因为用到了Vite做代理解决跨域问题,所以部署到Netlify需要多做一些步骤。使用Vite代理后,如果前端是在本地部署,需要添加VITE_PROXY环境变量。例如在.env.development文件中添加VITE_PROXY=[["/api/v1","https://xx.naihe.me/api/v1"],["/ws",......
  • 【vue流程编辑器框架】Vue-Flowchart-Editor
    前言:不管是OA系统常见的审批流程图还是业务流程图,前端经常会遇到一些流程编辑器的业务场景,分享一个我举得好用的vue组件:Vue-Flowchart-Editor:一个基于Vue的流程图编辑器组件,支持创建、编辑和展示流程图,具有可拖拽节点、连接线、自动布局等功能。 官网地址:https://git......
  • Vue 单组件入门
    Vue基础入门一、Vue脚手架1.简介Vue的脚手架(VueCLI:CommandLineInterface)是Vue官方提供的标准化开发平台。它可以将我们.vue的代码进行编译生成htmlcssjs代码,并且可以将这些代码自动发布到它自带的服务器上,为我们Vue的开发提供了一条龙服务。脚手架官网地址:ht......
  • .NET入门相关学习
    2023年05月22日笔记项目信息实体添加新属性①类增加对应属性声明。②快捷键Ctrl+Shift+B生成新应用;或者终端指令dotnetbuild生成新应用。③对应Controller字段增加属性;View视图增加对应部件(Index/Create/Edit);更新 SeedData 类。④PMC中输入指令进行数据库模型迁移:Add-Mi......
  • vue用qrcodejs2生成二维码,解决多个二维码追加的问题
    vue使用qrcodejs2生成二维码1、安装qrcodejs2npminstallqrcodejs2 2、代码//这个div用来展现二维码<divid="twoImageId"></div>//生成二维码的方法generateQRCode(classId,value){ newQRCode(document.querySelector(classId),{ text:value, width:......
  • Vue脚手架笔记备注
    笔记脚手架文件结构├──node_modules├──public│├──favicon.ico:页签图标│└──index.html:主页面├──src│├──assets:存放静态资源││└──logo.png││──component:存放组件││└──HelloWorld.vue│......