正文

三个小时vue3.x从零到实战（后）（vue3.x配套工具及项目化构建）(代码片段)

cui_yonghua  cui_yonghua  2022-12-06  773

关键词：

一. 环境搭建

使用淘宝镜像的命令：

npm install -g cnpm --registry=https://registry.npm.taobao.org

这样就可以使用 cnpm 命令来安装模块了：

cnpm install [name]

Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。

# 全局安装 vue-cli
$ cnpm install -g @vue/cli
# 安装完后查看版本
$ vue --version
@vue/cli 4.5.13

二. vue脚手架: vue-cli构建工具

## 创建项目
vue create my-project

用来创建vue项目的工具包
创建项目:
    npm install -g vue-cli
    vue init webpack VueDemo
开发环境运行:
    cd VueDemo
    npm install
    npm run dev
生产环境打包发布
    npm run build
    npm install -g serve
    serve dist
    http://localhost:5000

三. vuex语法

github站点: https://github.com/vuejs/vuex
在线文档: https://vuex.vuejs.org/zh-cn/
简单来说: 对应用中组件的状态进行集中式的管理(读/写)

下载: npm install vuex --save

四. eslint

用来做项目编码规范检查的工具
基本原理: 定义了很多规则, 检查项目的代码一旦发现违背了某个规则就输出相应的提示信息
有相应的配置, 可定制检查

五. 使用vite构建

vite 是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发，

它做到了本地快速开发启动, 在生产环境下基于 Rollup 打包。

快速的冷启动，不需要等待打包操作；
即时的热模块更新，替换性能和模块数量的解耦让更新飞起；
真正的按需编译，不再等待整个应用编译完成，这是一个巨大的改变。

npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev

三个小时vue3.x从零到实战（前）（vue3.x基础）(代码片段)

目录：三个小时vue3.x从零到实战（前）（vue3.x基础）三个小时vue3.x从零到实战（中）（vue3.x高级语法）三个小时vue3.x从零到实战（后）（vue3.x配套工具及项目化构建）三个小时vue3... 查看详情

三个小时vue3.x从零到实战（中）（vue3.x高级语法）(代码片段)

三个小时vue3.x从零到实战（vue3.x经典案例46个）(代码片段)

三个小时vue3.x从零到实战（typescript的搭建使用及资料）(代码片段)

vue3.x从零开始——router+vuex+typescript实战演练（上）(代码片段)

...先通过Vue-CLI创建一个Vue3项目，详细流程可以参考《Vue3.x从零开始（一）》vuecreatetest-vue3-demo勾选TypeScript、Router、Vue 查看详情

vue项目实战——实现一个任务清单基于vue3.x全家桶（简易版）(代码片段)

Vue3.x项目实战（一）项目名参考链接Vue2.x_todoList基于Vue2.x实现一个任务清单Vue2.x_GitHub搜素案例基于Vue2.xGitHub搜素案例文章目录Vue3.x项目实战（一）Vue3.x实现todoList1、前言2、项目演示（一睹为快）3、涉及知... 查看详情

vue项目实战——基于vue3.x+vantui实现一个多功能记账本（开发导航栏及公共部分）(代码片段)

基于Vue3.x+VantUI的多功能记账本（三）文章目录基于Vue3.x+VantUI的多功能记账本（三）项目演示开发导航栏1、底部导航栏2、测试底部导航栏3、公共头部写到最后（附源码）系列内容参考链接基于Vue3.x&#... 查看详情

vue项目实战——基于vue3.x+vantui实现一个多功能记账本（登录注册页面，验证码）(代码片段)

基于Vue3.x+VantUI的多功能记账本（四）文章目录基于Vue3.x+VantUI的多功能记账本（四）项目演示1、登录注册页面2、图片验证码3、修改axios4、写到最后（附源码）系列内容参考链接基于Vue3.x+VantUI的多... 查看详情

vue3.x项目搭建

一、环境准备（此处设备使用window10系统）1、node安装，安装地址为nodejs官网（http://nodejs.cn/download/）这里根据自己的设备选择对应的版本，下载下来后，直接安装即可。 2、检查是否装好打开cmd，输入node-v，如果下面显示出... 查看详情

（十二）vue3.x中重写的v-model

...双向绑定一个值，在某些需求面前显的力不从心。但是在Vue3.x中已经可以实现啦！1、概述：数据双向绑定2、回顾：在Vue2.x中，v-model进行数据双向绑定（语法糖）的原理且在Vue2.x中不能够绑定多个v-model3、用例：Vue3.x重写了v-model... 查看详情

vue3.x前瞻

文档：APIReference教程课件1.初始化项目//①npmi-g@vue/cli//②vuecreatemy-project//③npminstall@vue/composition-api-S//④main,jsimportVuefrom‘vue‘importVueCompositionApifrom‘@vue/composition-api‘Vue.use(VueCompositionA 查看详情

（十四）vue3.x核心之getcurrentinstance

...引入：importgetCurrentInstancefrom'vue';下一章：（十五）Vue3.x中我们将采用mitt实现全局事件总上一章：（十三）Vue3.x中的emits选项ps：人呀，在对应的年纪做对应的事情，放下过去，放下执念，放下不必要的社交，让自己活的像... 查看详情

vue3.x新增特性(代码片段)

1.vue3.x新增特性1.1vue3.x相关资源vue3.x官方仓库：https://github.com/vuejs/vue-nextvue3.x中文官方文档：https://v3.cn.vuejs.org/vue-cli官方仓库：https://github.com/vuejs/vue-clivue-cli官方文档：https://cli.vuejs.org/zh/1.2创建vue3.x项目方式主流... 查看详情

vue3.x新增特性(代码片段)

第七讲、vue3.x实现一个完整的todolist（待办事项）

参考技术A一、Vue3.x中集成Sass/scsss1.1、安装sass-loadernode-sass1.2、style中配置sass/scsslang可以配置scss，scoped表示这里写的css只有当前组件有效二、Vue3.x实现一个完整的toDoListgit地址待添加。查看详情

分享15个vue3全家桶开发的避坑经验(代码片段)

最近入门Vue3并完成3个项目，遇到问题蛮多的，今天就花点时间整理一下，和大家分享15个比较常见的问题，基本都贴出对应文档地址，还请多看文档~已经完成的3个项目基本都是使用Vue3(setup-script模式)全家桶... 查看详情

vue3.x的细碎小事（持续更新）(代码片段)

2021.6.19查看Vue-Cli版本号vue-VVue-Cli4.0需要使用Element-Plus，最好直接在Vue-UI中安装，初学者建议直接选择FullimportVue.use()要写成app.use()修改属性后刷新页面时记得清理一下缓存Vue前端跨域login()this.$http(method:'post',url:'/q... 查看详情

认识vue3.x----项目代码结构分析

...createApp方法进行实例化2.router和store采用use方法进行配置3.Vue3的典型API风格：按需导入，为了提升打包的性能Vue3中组件的模板可以没有根节点（Vue2中组件的模板必须有唯一的根节点）1.创建路由实例对象采用createRouter方法，Vue3的... 查看详情