如何快速上手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哦!

相关推荐
一只小风华~3 小时前
Vue Router 路由元信息(meta)详解
前端·javascript·vue.js
计算机学姐3 小时前
基于微信小程序的垃圾分类管理系统【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
武昌库里写JAVA4 小时前
C语言 #pragma once - C语言零基础入门教程
vue.js·spring boot·sql·layui·课程设计
小谭鸡米花5 小时前
高德地图电子围栏/地图选区/地图打点
前端·javascript·vue.js
好好好明天会更好6 小时前
Vue2中页面数据响应的问题
前端·javascript·vue.js
拉不动的猪6 小时前
回顾前端项目打包时--脚本引入时机与环境类型的判断问题
前端·vue.js·面试
月弦笙音6 小时前
【Vue组件】封装组件该考虑的核心点
前端·javascript·vue.js
EF@蛐蛐堂7 小时前
Federation vs Garfish vs Micro-app 微前端选型(二)
前端·vue.js·前端框架
一枚前端小能手8 小时前
🔍 重写vue之ref和reactive
前端·javascript·vue.js
Copper peas8 小时前
axios使用过程
前端·javascript·vue.js