Vue.js使用简介

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

一、Vue.js是什么

    Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

二、如何使用vue.js" title="vue.js">vue.js

一般常见的有以下三种方法：

1、独立版本

    在Vue.js的官网上直接下载vue.js,并在<script>标签中引用。->  <script src = ../vue.js> </script>  开发环境不要使用最小压缩版，不然会没有错误提示和警告！

2、使用CDN方法

  •  BootCDN（国内） : https://cdn.bootcss.com/vue/2.2.2/vue.min.js ， （国内不稳定）       

  • unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。（推荐使用）

  • cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js，如（<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>）

3、NPM方法

在用Vue.js构建大型应用时推荐使用NPM安装方法，NPM能很好的和诸如Webpack或者Browserify模块打包器配合使用。Vue.js也提供配套工具来开发单文件组件。

这里我详细介绍的也是NPM安装方法：

（1）安装node.js（npm）

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。

Node.js 的包管理器 npm，是全球最大的开源库生态系统。

这里我们要用到的就是它的包管理器npm。

先下载Node.js,网站https://nodejs.org/en/，以偶数开头的版本号是稳定版，以奇数开头是最新版，推荐使用稳定版。

安装过程就一直点下一步就好了。安装完成后，windows打开cmd终端（win+R），

输入node -v,查看node版本号


这里版本号之所以不一样是因为我之前就装好了node

npm包管理器是集成在node中的，所以npm已经随着node安装好了

输入npm -v，查看npm版本号


（2）安装cnpm

由于有些npm资源被屏蔽或者是国外资源的原因，经常会导致npm安装依赖包的时候失败，所以我们还需要npm的国内镜像----cnpm。

终端输入npm install -g cnpm --registry=http://registry.npm.taobao.org


（3）安装vue-cli脚手架构建工具

终端输入 npm install -g vue-cli

目前为止，需要准备的环境和工具已经就绪，下面就可以使用vue-cli来构建项目。

选择存放项目的目录，进入该目录，我的是放在D盘的，

终端输入 vue init webpack firstApp


出现的几个选项没有太多要求，一路回车都可以，值得注意的是第六个选项如果选yes，那么你在写代码的过程中必须严格遵守它定义的规则，所以一般输入no不使用ESLint来检查代码。


现在，项目就创建成功了。


注意：第一次初始化一个项目的时候需要在终端输入npm install，来安装整个项目所需的依赖。我这里不是第一个项目，之前装个过了，所以就不再执行了。

接下来我们打开文件夹，看看新增项目的目录，


 现在来简单介绍下目录及作用

build:最终发布的代码的存放位置

config:配置路径、端口号等一些信息，刚开始选择默认配置就可以了

node_modules:npm加载的项目依赖模块

src:这里是我们开发的主要目录，写的代码都会在这个目录下，包含的几个常见的目录及文件：

        assets:放置项目所用的图片，如logo等

        components：放置其他组件

        App.vue:项目入口文件，启动项目后，在浏览器打开，首先看到的就是这个根组件里的内容

        main.js:项目的核心文件，使用路由跳转、axios等都需要在这里提前引入

static:静态资源目录

test:初始测试目录

.xxx文件:配置文件

index.html:首页入口文件，可以添加一些meta信息或者统计代码什么的

package.json:项目配置文件

README md:项目的说明文件


然后按照终端给出的指示，进入该项目目录，

终端输入npm run dev


项目启动后，在浏览器输入项目启动的地址：


好啦，用vue-cli搭建的第一个项目据完成啦。

以上是 Vue.js使用简介 的全部内容， 来源链接： utcz.com/z/377273.html

回到顶部