【前端基础学习】

最新推荐文章于 2024-11-10 22:45:39 发布

零基础123

最新推荐文章于 2024-11-10 22:45:39 发布

阅读量123

点赞数

分类专栏：前端文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/FanSunshineboy/article/details/124680254

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了Vue.js的基础知识，包括它的渐进式特性、安装方式以及如何使用vue-cli搭建项目。Vue.js是一个轻量级且易于上手的前端框架，适合快速构建用户界面。文章详细阐述了Vue的CDN引入、本地安装和脚手架的使用步骤，同时也解析了vue-cli项目的基本目录结构，为初学者提供了清晰的学习路径。

摘要由CSDN通过智能技术生成

前端基础学习

前言

Vue.js是一套用于构建用户界面的渐进式框架，主要用于快速的构建前端界面，与其它大型的前端框架不同，Vue被设计为可以自底向上逐层应用.
Vue.js是一个用于构建用户界面的前端库，本身就具有响应式编程和组件化的诸多优点。所谓响应式编程，即是一种面向数据流和变化传播的编程范式，可以在编程语言中很方便地表达静态或动态的数据流，而相关的计算模型会自动将变化的值通过数据流进行传播。
Vue.js相比较于Angular.js和React.js而言，Vue.js并没有引入太多的新概念，只是对已有的概念进行了精简。并且，Vue.js很好的借鉴了React.js的组件化思想，使应用开发起来更加容易，真正实现了模块化开发的目的。

一、Vue是什么？

Vue是一个渐进式的框架

渐进式意味着你可以将Vue作为你应用的一部分嵌套其中
Vue的核心库以及其生态系统
Core + Vue-router + Vuex

二、Vue的安装方式

1.方式一

直接CDN引入：

// 开发环境版本, 包含了帮助的命令行警告
<srcipt src='https://cdn.jsdeliver.net/npm/vue/dist/vue.js'></script>

// 生产环境版本, 优化了尺寸和速度
<srcipt src='https://cdn.jsdeliver.net/npm/vue'></script>

2.方式二

下载和引入：

// 开发环境
https://vuejs.org/js/vue.js

// 生产环境
https://vuejs.org/js/vue.min.js

3. 方式三

NPM安装（推荐使用）：
在官网安装node.js,里面自带了npm。官网链接：node安装官网
安装配置教程：node安装配置教程
检验是否安装成功，在终端输入代码，显示npm的版本则安装成功

# 查看版本信息
npm -v  
# 升级npm

三、使用vue-cli脚手架

3.1安装脚手架

在这里插入图片描述
使用VScode的终端进入终端文件夹

 #安装vue-cli
npm install -g @vue/cli
# 创建vue项目
vue create vue-demo02

出现如下图所示，可以选用两个版本的脚手架，敲一下回车键，就创建了vue3的脚手架
在这里插入图片描述

3.2 进入文件夹，运行服务

方式一

#进入指定文件夹
cd vue-demo02
#运行服务
npm run serve

在这里插入图片描述
直接将网址复制到浏览器中可以打开

方式二：
找到创建的文件夹中的package.json
在这里插入图片描述
2.找到serve，然后鼠标右击打开运行脚本

3.3 vue脚手架项目目录：

创建了一个test的项目，下面有以下目录：

在这里插入图片描述

node_modules // 项目中依赖包 （npm i）下载
public // 静态资源目录 应用 唯一 index.html就在public中
  index.html // 项目主页面
  //在main.js里面定义的实例将挂载在#app节点下，内容通过vue组件填充。
src  // 源码目录
  assets // 静态资源目录  开发中 用到的静态都放到这里
  components // 用来放公共组件的（不是路由组件）
  router // 路由配置文件
  views // 路由组件 放置目录
  App.vue // 根组件 这里面有router-view 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。
  main.js // 入口文件 加载公共组件
.eslintrc.js // eslint 配置文件
.gitignore // git 忽略文件 在项目开始就创建.gitignore文件的习惯，否则一旦push 需要重新清除git缓存
.editorconfig // 代码格式
babel.config.js // babel配置（es6转es5）
vue.config.js // 项目配置文件
package-lock.json // 是在 npm install时候生成一份文件，用以记录当前状态下实际安装的各个npm package的具体来源和版本号。
package.json // 项目基本信息 项目开发所需模块
  // 有三个脚本命令
      "serve": "vue-cli-service serve", // 运行项目 启动服务器
      "build": "vue-cli-service build", // 构建生产环境代码 生成dist目录
      "lint": "vue-cli-service lint" // 自动验证并修改 代码格式