美文网首页
Vue学习笔记之Vue安装

Vue学习笔记之Vue安装

作者: Kity_Pei | 来源:发表于2021-05-31 15:02 被阅读0次

    什么是Vue.js

    Vue是一套用于构建用户界面的渐进式JavaScript框架。与其他大型框架不同的是,vue被设计为自底向上逐层应用。Vue的核心库只关注视图层。

    Vue是典型的MVVM模型的框架。

    Vue 不支持 IE8以下版本,因为Vue使用了IE8无法模拟的ECMAScript 5特性。

    Vue环境配置

    Vue安装

    直接用<script>引入

    1. 下载Vue对应的版本,通过<script>进行引入;
    2. 不下载Vue对应的版本,通过CDN访问对应的vue版本地址,通过<script>进行引入;

    引入方式大体如下:

    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 生产环境版本,优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    

    注:如果是下载对应版本的Vue,引入的话,把src中换成项目中对应的地址即可。

    通过NPM安装

    NPM是个什么鬼?

    NPM其实就是NodeJS的包管理工具,能够解决NodeJS代码部署上的很多问题。常见的使用场景有以下几种:

    • 通过NPM服务器下载别人编写好的第三方包到本地
    • 通过NPM服务器下载并安装别人编写好的命令行程序到本地
    • 将自己编写好的包或者命令行程序上传到NPM服务器供别人使用

    这里废话了一堆,其实就是见到介绍一下npm,然后告诉你,要想用npm就电脑里需要有安装过NodeJS


    关于NPM常用的命令,后面补一篇专项的。


    NodeJS安装步骤
    1. 判断电脑里面有没有安装过NodeJS
    <!--简单粗暴,命令行看node的版本-->
    node -d
    
    1. 如果安装了,直接跳过以下步骤;
    2. 打开NodeJS的官网,下载NodeJS的安装包,然后一通Next操作;
    3. 再次使用步骤1里面的命令,查看版本号,如果出现版本号,说明安装正常,如果木有,那就是需要配置NodeJS的环境变量(windowsNodeJS安装过程中的Custom Setup里面有一个Add to Path默认是选中的,不修改的话,基本不需要配置环境变了,如果你想玩的话,自己找某度,搜索怎么配置环境变量);

    NPM安装Vue

    NPM安装Vue一般有两种方式,其实是NPM安装就两种方式,一种是本地安装,一种是全局安装

    本地安装Vue
    • 把安装包放到npm命令所在的目录的/node_modules中,如果没有这个目录的话,会在执行npm命令时生成这个目录;
    • 本地安装的包通过require()来引入本地安装的包;

    本地安装命令如下(二选一即可):

    <!-- 本地安装 -->
    npm install Vue
    npm i Vue
    
    全局安装Vue
    • 将安装包放在 /usr/local 下或者你 node 的安装目录;
    • 可以直接在命令行里使用;

    全局安装命令如下(二选一即可):

    <!-- 全局安装 -->
    npm install Vue -g
    npm install -g Vue
    

    注意:本地安装和全局安装,在命令上就区别在-g,而且-g可以写在Module Name的前面或者后面,实现的效果是一样的。

    NPM删除安装包

    不赘述了,有安装就有删除,额外送个删除的命令;

    <!-- 全局删除 -->
    npm uninstall -g <Module Name> 
    npm uni -g <Module Name>
    npm uninstall <Module Name> -g
    npm uni <Module Name> -g
    <!-- 本地删除 -->
    npm uninstall <Module Name>
    npm uni <Module Name>
    

    通过脚手架安装使用

    Vue提供了一个官方的CLI,即Vue-ClI,简单点聊就是通过npm安装Vue-CLI来使用Vue

    Vue-CLI简单介绍

    Vue-CLI是前端常说的Vue脚手架,通过脚手架可以快速搭建一个网页项目。

    • 通过 @vue/cli 实现的交互式的项目脚手架。
    • 通过 @vue/cli +@vue/cli-service-global 实现的零配置原型开发。
    • 一个运行时依赖(@vue/cli-service),该依赖:
      • 可升级;
      • 基于webpack构建,并带有合理的默认配置;
      • 可以通过项目内的配置文件进行配置;
      • 可以通过插件进行扩展。
    • 一个丰富的官方插件集合,集成了前端生态中- 最好的工具。
    • 一套完全图形化的创建和管理 Vue.js 项目的用户界面。
    安装Vue-CLI
    <!--安装Vue-CLI 3.0以前的版本-->
    npm install -g vue-cli
    <!--安装Vue-CLI 3.0以后(包含3.0)的版本-->
    npm install -g @vue/cli
    

    特别注意:

    Vue-CLI以3.0为界限,包名是不同的,一个是 vue-cli ,一个是 @vue/cli

    一般安装脚手架都是全局安装,它也不影响你不使用脚手架来进行实际开发。

    安装指定版本的Vue-CLI

    有些时候我们想安装制定版本的脚手架,所以我额外送几条npm命令。

    <!--查看Vue脚手架在3.0之前的npm版本-->
    npm view vue-cli versions --json
    <!--查看Vue脚手架2.6.0版本-->
    npm install -g vue-cli@2.6.0
    
    <!--查看Vue脚手架在3.0之后的npm版本-->
    npm view @vue/cli versions --json
    <!--查看Vue脚手架3.6.0版本-->
    npm install -g @vue/cli@3.6.0
    

    相关文章

      网友评论

          本文标题:Vue学习笔记之Vue安装

          本文链接:https://www.haomeiwen.com/subject/bcrbsltx.html