首页 > 其他分享 >Vue学习笔记(八):Vue脚手架

Vue学习笔记(八):Vue脚手架

时间:2023-10-10 13:58:51浏览次数:32  
标签:npm Vue 笔记 vue yarn 脚手架 安装 registry

   

Vue脚手架是Vue官方提供的标准化开发工具,使用Vue脚手架(vue-cli)可以快速创建 vue 项目。

   

1 安装npm

   

第一步(仅第一次执行): 下载npm,npm(node package manager)是nodejs下的包管理工具,后续下载、管理vue包都得通过npm进行,下载地址如下:

http://nodejs.cn/download/

image.png

注意,安装好之后,最好配置到环境变量中(当然,安装过程自动配置到环境变量)。安装好后,如果输入npm -v输出版本号,证明安装成功。

   

npm安装插件是从国外服务器下载,受网络影响大,可能出现异常。针对这一问题,有两种解决方案:

  • 方法1:为npm配置淘宝镜像

配置npm淘宝镜像: npm config set registry https://registry.npm.taobao.org

  • 方法2:安装cnpm

cnpm是淘宝团队负责维护的npm包,速度快、稳定,运行命令安装cnpm:

npm install -g cnpm --registry=https://registry.npmmirror.com

安装好后,在控制台输入cnpm -v,能够输出如下信息,表示安装成功:

image.png

   

2 安装yarn

  • 速度超快。

Yarn 缓存了每个下载过的包,所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率,因此安装速度更快。

  • 超级安全。

在执行代码之前,Yarn 会通过算法校验每个安装包的完整性。

  • 超级可靠。

使用详细、简洁的锁文件格式和明确的安装算法,Yarn 能够保证在不同系统上无差异的工作。

通过一下命令安装yarn :

npm install -g yarn

随后还需要为yarn配置淘宝源:

yarn config set registry https://registry.npm.taobao.org --global

   

3 安装vue脚手架并创建项目

   

全局安装@vue/cli(仅第一次执行)。

npm install -g @vue/cli

切换到要创建项目的目录,然后使用命令创建项目。

vue create xxxx(项目名) 输入命令后,命令行将会提示选择安装vue3还是vue2:

image.png

选择使用npm安装还是yarn安装:

image.png

启动项目,注意,先将命令行切换到项目目录。

npm run serve

标签:npm,Vue,笔记,vue,yarn,脚手架,安装,registry
From: https://www.cnblogs.com/chenhuabin/p/17754478.html

相关文章

  • abp.vnext笔记
    安装工具dotnettoolinstall-gVolo.Abp.Cli--version6.0创建项目abpnewTodoApp--version6.0.0配置数据库连接修改TodoApp.DbMigrator和TodoApp.Web项目的appsettings.json"ConnectionStrings":{//"Default":"Server=(LocalDb)\\MSSQLLocalDB;Da......
  • vue实现视频上传功能
    本文实例为大家分享了vue实现视频上传功能的具体代码,供大家参考,具体内容如下环境:vue+TS上传视频+上传到阿里云主要处理前端在vue下上传视频使用的是阿里云的视频点播服务1、需要后台去申请一个开发API,请求阿里云的接口访问控制2、有了开发视频的token,供给前端3、前端去请......
  • 《复盘:对过去的事情做思维演练》读书笔记
    复盘是对过去所作的事情进行回顾、反思和探究,找出原因,找到规律,从而指导我们解决问题,帮助我们提升。对于复盘来说,回顾、反思、探究、提升,一个都不能少。复盘的由来复盘,原本是围棋中的一个术语。当下完一盘棋之后,要重新再棋盘上走一遍,看看哪些子下的好,哪些子下得不好,哪些地方可以......
  • 学习笔记:斜率优化
    引入有时候我们会遇见一些dp式子\[f_i=\min(f_j+a_i\timesb_i)(j\leqi-1)\]这些式子和\(j\)没有任何关系可以前缀处理最小值\(O(n)\)快速解决但是有些式子是这样的\[f_i=\min(f_j+a_i\timesb_j+c_i)\]这种问题可以使用斜率优化至\(O(n\logn)\)例题传送门很......
  • 学习笔记427—Python Keras 报错AttributeError: 'Sequential' object has no attribu
    PythonKeras报错AttributeError:'Sequential'objecthasnoattribute'predict_classes'解决方法本文文要介绍Python中,使用Keras执行yhat_classes=model.predict_classes(X_test)代码报错:AttributeError:'Sequential'objecthasnoattribute'pr......
  • 学习笔记426—keras中to_categorical函数解析
    keras中to_categorical函数解析1.to_categorical的功能简单来说,to_categorical就是将类别向量转换为二进制(只有0和1)的矩阵类型表示。其表现为将原有的类别向量转换为独热编码的形式。先上代码看一下效果:fromkeras.utils.np_utilsimport*#类别向量定义b=[0,1,2,3,4,5,6,7......
  • 学习笔记425—train_test_split 函数介绍
    train_test_split函数介绍在机器学习中,我们通常将原始数据按照比例分割为“测试集”和“训练集”,从sklearn.model_selection中调用train_test_split函数 简单用法如下:X_train,X_test,y_train,y_test=sklearn.model_selection.train_test_split(train_data,train_targe......
  • 学习笔记424—%matplotlib inline的作用
    %matplotlibinline的作用%matplotlibinline是一个魔术命令(magiccommand),用于在JupyterNotebook或IPython环境中显示matplotlib图形的内嵌设置。当使用%matplotlibinline命令时,它会告诉Python在生成的图形直接嵌入到Notebook中的输出单元格中,而不是作为弹出窗口显示......
  • vue上传视频插件
    视频作为一种信息表达方式,越来越受到人们的关注和喜爱。近年来,随着移动互联网的普及,手机、平板电脑等设备可以随时随地观看视频。在开发网站或移动应用时,上传和展示视频成为一项不可或缺的功能。Vue作为一种现代化JavaScript框架,提供了丰富的开发工具和插件,其中视频上传插件是Vue......
  • vue之修饰符
    1.简介修饰符是以半角句号.指明的特殊后缀2.常用修饰符2.1.prevent:阻止事件默认行为可以告诉v-on指令对于触发的事件调用event.preventDefault(),一般用于表单提交、a标签的click事件等<formv-on.prevent="onSubmit"></form><ahref="www.baidu.com"@click.pre......