Vue 是什么

Vue.js官网:https://cn.vuejs.org/

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


一、安装 Node.js

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。

Node.js官网:https://nodejs.org/
版本号:16.14.0

下载安装完 Node.js,打开命令提示符(以管理员身份运行)分别输入:node -v、npm -v 出现版本号即安装成功。
在这里插入图片描述
备注:建议下载后缀名为 .msi 的安装包,它会帮你把环境变量给配置好,然后根据步骤安装。


二、安装 webpack 环境

webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。

webpack官网:https://webpack.docschina.org/

代码如下:

npm install webpack -g

结果如下:
在这里插入图片描述


三、安装 vue-cli

代码如下(示例):

npm install vue-cli -g

结果如下:
在这里插入图片描述


四、创建 vue 项目

代码如下:

vue init webpack

结果如下:
在这里插入图片描述

备注:

Project name项目名称
Project description项目的描述
Author作者
Install vue-router是否安装vue-router
Use ESLint to lint your code是否使用eslint js代码规范
Setup unit tests是否使用单元测试
Setup e2e tests with Nightwatch是否使用端对端测试

五、安装依赖包

代码如下:

npm install

结果如下:
在这里插入图片描述


六、运行项目

代码如下:

npm run dev

结果如下:
在这里插入图片描述

在浏览器输入 http://localhost:8080 回车,就可以看到vue欢迎页啦!
在这里插入图片描述


补充

vue 项目结构介绍
build/webpack配置参数
config/是vue项目的配置文件
node_modules/node.js 模块包
src/源代码 我们写的代码 大都放在这个文件下
static/静态资源 (只供index.html使用)
.babelrcbabel的编译参数
.gitignoregit 忽略的配置文件
index.html项目入口(单入口项目的入口)
package.jsonnode.js项目的配置文件
README.mdgit的项目 说明文件
src/ 工作目录介绍
assets/静态资源 (只供src下文件使用)
components/组件
router路由
App.vue根组件
main.jsjs入口文件

单文件组件

  • App.vue 就是一个单文件组件。

访问流程

  • index.html -> main.js -> App.vue -> router(index.js) -> components

插件

  • 插件通常会为 Vue 添加全局功能。
开发插件 - 插件种类:
  1. 添加全局方法或者属性,如: vue-custom-element
  2. 添加全局资源:指令/过滤器/过渡等,如 vue-touch
  3. 通过全局 mixin 方法添加一些组件选项,如: vue-router
  4. 添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现。
  5. 一个库,提供自己的 API,同时提供上面提到的一个或多个功能,如 vue-router
    Vue.js 的插件应当有一个公开方法 install
使用插件 - 通过全局方法 Vue.use() 使用插件:
  • Vue.use(插件)

请作者喝杯咖啡吧

如果本文对你有帮助的话,可以请作者喝杯咖啡~

微信支付宝
在这里插入图片描述在这里插入图片描述
Logo

前往低代码交流专区

更多推荐