文章目录
Vue.js前端框架入门
一、什么是Vue.js
是渐进式JavaScript框架,广泛使用的前端开发框架。
- 广泛使用的前端开发框架:PC端网页、移动端H5站点、小程序、App(安卓、IOS)
- 用于开发单页面应用:只有一个HTML页面(Single Page web Application,SPA),使用JavaScript动态切换HTML内容,不需要通过刷新重新加载页面。
- 组件化开发方式:把一个页面按照模块拆分成N个小块。
什么是组件:按模块划分的前端代码片段,可复用的前端代码片段,容易维护的前端代码片段
- 生态丰富、学习成本低
优点:
- 用户体验更好
- 减轻服务器的压力
- 前后端完全分离,通过接口(Restful API)进行通信
- 接口代码的复用
二、Vue.js生态圈及其周边扩展
- 官方维护开发的框架及扩展
- 第三方UI框架、组件库。如:VantUI
- 基于Node.js的模块
- 完整的技术文档和学习资料
三、Vue.js框架的结构、组件开发思想
四、Vue.js所适用的场景
异步网络请求库
组件拆分,前端功能实现
接口实现,前后端联调
Vue安装
Node.js环境安装
Node.js 官网:https://nodejs.org/en ,下载 Node.js LTS 版本的安装包:
LTS 表示该安装包是一个被长期支持的版本,可以理解成是一个稳定版本。
点击下一步。
安装完成后验证安装是否成功:
修改全局依赖包下载路径:
默认情况下,我们在执行npm install -g XXXX下载全局包时,这个包的默认存放路径位C:\Users\用户名\AppData\Roaming\npm\node_modules
下,可以通过CMD指令npm root -g
查看。
我们可以自定义存放目录,在CMD窗口执行以下两条命令修改默认路径:
npm config set prefix "C:\node\node_global"
npm config set cache "C:\node\node_cache"
或者打开c:\node\node_modules\npm.npmrc文件,修改如下:
prefix =C:\node\node_global
cache = C:\node\node_cache
创建一个 Vue 应用
进入到当前工作目录正是打算创建项目的目录:
npm create vue@latest
这一指令将会安装并执行 create-vue,它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示:
在项目被创建后,通过以下步骤安装依赖并启动开发服务器:
cd <your-project-name>
npm install
npm run dev
创建后的项目目录如下:
- node_modules : 项目依赖包文件夹,比如通过 npm - - install 包名 安装的包都会放在这个目录下;
- public : 公共资源目录,用于存放公共资源,如 - favicon.ico 图标等;
- index.html : 首页;
- package.json : 项目描述以及依赖;
- package-lock.json : 版本管理使用的文件;
- README.md : 用于项目描述的 markdown 文档;
- src : 核心文件目录,源码都放在这里面;
- assets : 静态资源目录,用于存放样式、图片、字体等;
- components: 组件文件夹,通用的组件存放目录;
- App.vue: 主组件,也是页面的入口文件,所有页面都是在 App.vue 下进行路由切换的;
- main.js : 入口 Javascript 文件;项目的核心文件。
成功执行以上命令后访问 http://localhost:5173/,输出结果如下所示:
文章评论