首页 > 其他分享 >VUE构建

VUE构建

时间:2022-09-05 00:24:05浏览次数:59  
标签:npm VUE cli webpack vue 构建 install 安装

VUE

渐进式 JavaScript 框架

易学易用

基于标准 HTML、CSS 和 JavaScript 构建,提供容易上手的 API 和一流的文档。

性能出色

经过编译器优化、完全响应式的渲染系统,几乎不需要手动优化。

灵活多变

丰富的、可渐进式集成的生态系统,可以根据应用规模在库和框架间切换自如。

VUE构建

下载并安装node,推荐LTS稳定版。

linux

apt install nodejs npm -y

yum install nodejs npm -y

Windowsx

访问nodejs官网,下载并安装适应操作系统的版本即可。

后续步骤

命令执行

node -v
nom -v

查看是否输出版本号。

安装vue

npm install vue -g

安装webpack模板

npm install webpack -g

由于webpack 4以上的版本内,命令相关内容被放入webpack-cli,因此我们还需要安装webpack-cli

npm install webpack-cli -g

安装手脚架vue-cli

npm install vue-cli -g

输入vue --version查看版本号

vue --version

安装vue-router

npm install vue-router -g

创建基于webpack模板的vue应用程序

vue init webpack <项目名>

根据提示输入相关内容

1.项目名

2.项目描述

3.作者

4.是否安装编译器

5.是否安装vue-router

6.是否使用ESLint做代码检查

7.是否安装单元检测工具

8.单元测试相关

9.创建完成后直接初始化

关于以上内容,项目名、项目描述、作者根据情况填写即可。4-9项建议安装vue-router,其他内容根据个人情况操做即可。

创建完成后,根据提示初始化项目即可。

cd <项目名>

npm rundev

根据提示访问网址即可。

关于环境变量

Windwos下安装nodejs可选择写入环境变量,安装的时候注意勾选上即可。

linux下默认写入环境变量。

npm加速

由于npm源站于国外,我们可以使用cnpm或将npm下载源改为国内镜像站,如执行以下命令将npm config设置为淘宝镜像即可。

npm config set registry https://registry.npm.taobao.org

标签:npm,VUE,cli,webpack,vue,构建,install,安装
From: https://www.cnblogs.com/kaydenlsr/p/16656624.html

相关文章

  • vue3项目-小兔鲜儿笔记-商品详情页01
    1.基础布局完成商品详情基础布局,路由配置,搭好页面架子  2.渲染面包屑编写一个钩子函数useGoods.js,将面包屑获取数据的逻辑抽取出来。//拿到商品信息import{......
  • Docker容器:利用Kubernetes、Flannel、Cockpit和Atomic构建和部署 pdf
    高清扫描版下载链接:https://pan.baidu.com/s/1bGR-iSE5_jHNvP1QWHKs3g点击这里获取提取码Linux系统或云环境上运行Docker的实用指南!无论是在笔记本上还是在远程云上,Docke......
  • jQuery和Vue入门
    jQueryjQuery:别人写好的js文件*********jquery中所有东西都是函数:jQuery的放啊发名称:first获取名称的第一个元素名称:last获取名称的最后一个元素*$(documen......
  • vue纯前端导入导出excel
    vue纯前端导入导出excel我们有时会遇到在前端实现导入/导出excel的需求这里直接推荐两个现成的vue导入导出excel的库,他们是基于xlsx封装的https://www.npmjs.com/packa......
  • 前端学习之------浏览器兼容(vue)
    1、vue支持所有兼容ES5的浏览器,IE8及以下的浏览器不支持IE5特性,所以IE8及以下的浏览器都不支持vue。2、Babel插件:IE浏览器不支持ES6语法,Babel插件的作用就是把ES6语法转为......
  • vue3——hook函数
    什么是hook?——本质是一个函数,把setup函数中使用的CompositionAPI进行了封装。类似于vue2.x中的mixin。自定义hook的优势:复用代码,让setup中的逻辑更清楚易懂......
  • 基于开源方案构建统一的文件在线预览与office协同编辑平台的架构与实现历程
    基于开源方案构建统一的文件在线预览与office协同编辑平台的架构与实现历程 大家好,又见面了。在构建业务系统的时候,经常会涉及到对附件的支持,继而又会引申出对附件在......
  • vue3——生命周期
    vue2.x的生命周期:  Vue3.0中可以继续使用Vue2.x中的生命周期钩子,但有有两个被更名:beforeDestroy改名为beforeUnmountdestroyed改名为unmountedVue3.0也提......
  • vue3——watchEffect函数
    watch的套路是:既要指明监视的属性,也要指明监视的回调。watchEffect的套路是:不用指明监视哪个属性,监视的回调中用到哪个属性,那就监视哪个属性watchEffect有点像comp......
  • Vue的钩子函数(路由守卫,keep-alive,生命周期)
    说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过生命周期钩子:这一比较简单但......