• 技术文章 >web前端 >前端问答

    构建vue-cli工程用到哪些技术

    青灯夜游青灯夜游2022-07-25 16:53:29原创128

    用到的技术:1、vue.js,vue-cli工程的核心,主要特点是双向数据绑定和组件系统;2、vue-router,路由框架;3、vuex,vue应用项目开发的状态管理器;4、axios,用于发起GET、或POST等http请求;5、vux,专为vue设计的移动端UI组件库;6、emit.js,用于vue事件机制的管理;7、webpack,模块加载和vue-cli工程打包器。

    本教程操作环境:windows7系统、vue3版,DELL G3电脑。

    什么是 vue-cli

    vue-cli(俗称:vue 脚手架)是 vue 官方提供的、快速生成 vue 工程化项目的工具。

    特点:① 开箱即用,② 基于 webpack,③ 功能丰富且易于扩展,④ 支持创建 vue2 和 vue3 的项目

    vue-cli 的中文官网首页:https://cli.vuejs.org/zh/

    构建的 vue-cli 工程都到了哪些技术

    1、vue.js:vue-cli工程的核心,主要特点是 双向数据绑定 和 组件系统。

    2、vue-router:vue官方推荐使用的路由框架。

    3、vuex:专为 Vue.js 应用项目开发的状态管理器,主要用于维护vue组件间共用的一些 变量 和 方法。

    4、axios( 或者 fetch 、ajax ):用于发起 GET 、或 POST 等 http请求,基于 Promise 设计。

    5、vux等:一个专为vue设计的移动端UI组件库。

    6、创建一个emit.js文件,用于vue事件机制的管理。

    7、webpack:模块加载和vue-cli工程打包器。

    vue-cli 工程常用的 npm 命令有哪些?

    下载 node_modules 资源包的命令:

    npm install

    启动 vue-cli 开发环境的 npm命令:

    npm run dev

    vue-cli 生成 生产环境部署资源 的 npm命令:

    npm run build

    用于查看 vue-cli 生产环境部署资源文件大小的 npm命令:

    npm run build --report

    命令效果:

    1.jpg

    在浏览器上自动弹出一个 展示 vue-cli 工程打包后 app.js、manifest.js、vendor.js 文件里面所包含代码的页面。可以具此优化 vue-cli 生产环境部署的静态资源,提升 页面 的加载速度。

    vue-cli工程中每个文件夹和文件的用处

    vue-cli目录结构:

    2.jpg

    vue-cli目录解析:

    【相关视频教程推荐:vuejs入门教程web前端入门

    以上就是构建vue-cli工程用到哪些技术的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:Vue vue-cli
    上一篇:vue中computed表示什么 下一篇:vue可以用哪些框架
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• 聊聊Vue3中的一个好用的功能:Teleport• vue中v-if和v-for哪个优先级高• vue为什么只有一个根标签• 总结分享几个 VueUse 最佳组合,快来收藏使用吧!• vue-roter有几种模式• 【整理分享】Vue开发必备的操作技巧,快来收藏吧!• vue服务端渲染和客户端渲染的区别是什么
    1/1

    PHP中文网