如何快速上手Vue框架

开发Vue的两种方式

  • 核心包传统开发模式:基于html / css / js 文件,直接引入核心包,开发 Vue。
  • 工程化开发模式:基于构建工具(例如:webpack)的环境中开发Vue。

工程化开发模式优点: 提高编码效率,比如使用JS新语法、Less/Sass、Typescript等通过webpack都可以编译成浏览器识别的ES3/ES5/CSS等 。

工程化开发模式问题:

  • webpack配置不简单

  • 雷同的基础配置

  • 缺乏统一的标准

为了解决以上问题,所以我们需要一个工具,生成标准化的配置

脚手架Vue CLI

基本介绍

Vue CLI 是Vue官方提供的一个全局命令工具

可以帮助我们快速创建 一个开发Vue项目的标准化基础架子。【集成了webpack配置】

好处
  1. 开箱即用,零配置

  2. 内置babel等工具

  3. 标准化的webpack配置

使用步骤

  1. 全局安装(只需安装一次即可) yarn global add @vue/cli 或者 npm i @vue/cli -g

  2. 查看vue/cli版本: vue --version

  3. 创建项目架子:vue create project-name(项目名不能使用中文)

  4. 启动项目:yarn serve 或者 npm run serve(命令不固定,找package.json)

接下来我们基于vuecli自定义创建项目:

1.创建vue项目:vue create 项目名

2.选择自定义:Manually select features

3.需要的特性:Babel,Router,Vuex,Css Pre-processors,Linter / Formatter

4.后面一直选n

5.css预处理器:Less

6.ESlint规范:ESLint + Standard config

7.啥时候校验:Lint on save

8.配置文件的位置: In dedicated config files

安装postcss-px-to-viewport:

$ npm install postcss-px-to-viewport --save-dev

更高效的创建vue3方式

对于最新的Vue3已经有了更快更好更便捷的创建工具

认识create-vue

create-vue是Vue官方新的脚手架工具,底层切换到了 vite (下一代前端工具链),为开发提供极速响应

使用create-vue创建项目

前置条件 - 已安装16.0或更高版本的Node.js

执行如下命令,这一指令将会安装并执行 create-vue

复制代码
npm init vue@latest

熟悉项目和关键文件

对于想创建vue3工程的同学来说更推荐使用create-vue哦!

相关推荐
半生过往42 分钟前
2025 前端动效实战指南:Vue Bits & React Bits 深度拆解(功能 / 复用 / 高频问题处理)
前端·vue.js·react.js
BumBle1 小时前
使用 SortableJS 实现vue3 + Element Plus 表格拖拽排序
前端·vue.js·element
JA+2 小时前
vue 实时数据表格组件 (stk-table-vue)
前端·javascript·vue.js
似水流年QC3 小时前
Electron 实战|Vue 桌面端开发从入门到上线
vue.js·electron·桌面端
合作小小程序员小小店3 小时前
web网页开发,在线%考试,教资,题库%系统demo,基于vue,html,css,python,flask,随机分配,多角色,前后端分离,mysql数据库
前端·vue.js·后端·前端框架·flask
一枚前端小能手4 小时前
🔄 重学Vue之nextTick和slot - 从底层实现到实战应用的完整指南
前端·javascript·vue.js
一嘴一个橘子5 小时前
vue.js 视频截取为 gif - 2(将截取到的gif 转换为base64 、file)
vue.js
你的电影很有趣6 小时前
lesson73:Vue渐进式框架的进化之路——组合式API、选项式对比与响应式新范式
javascript·vue.js
小张成长计划..6 小时前
VUE工程化开发模式
前端·javascript·vue.js
菜鸟una8 小时前
【微信小程序 + map组件】自定义地图气泡?原生气泡?如何抉择?
前端·vue.js·程序人生·微信小程序·小程序·typescript