【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等工具

    Vue CLI 内置了Babel,这是一个非常重要的特性。Babel 是一个广泛使用的JavaScript编译器,它的主要作用是将使用了ECMAScript新特性的代码转换为当前JavaScript环境(如较老的浏览器)可以理解和执行的代码。在Vue项目中,这意味着你可以在代码中自由使用最新的JavaScript语法(如ES6、ES7乃至ES8以上的特性),如箭头函数、async/await、解构赋值等,而不必担心浏览器兼容性问题。Babel会自动将这些代码转换为向后兼容的版本。

  3. 标准化的webpack配置


三、使用步骤

  1. 全局安装(只需安装一次即可)

    sh 复制代码
    yarn global add @vue/cli 或者 npm i @vue/cli -g

    yarn 是一个与 npm 类似的包管理器

    使用npm全局安装yarn

    cdm 复制代码
    npm install --global yarn
    安装后,可以通过yarn --version检测是否安装成功
  2. 查看vue/cli版本: vue --version

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

    PS:在哪执行命令,就会在哪创建项目目录

    输入指令后,会弹出三个选项,可以通过上下键选择

    这里选择第二个,即:Vue2

  4. 启动项目:先cd进入到目录里,然后使用yarn serve 或者 npm run serve(命令不固定,找package.json)

    值得注意的是,启动项目的命令不固定

相关推荐
木头没有瓜1 分钟前
vscode离线安装插件
ide·vue.js·vscode
伍哥的传说44 分钟前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
yugi9878381 小时前
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
前端
浪裡遊1 小时前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
旧曲重听12 小时前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿2 小时前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
夏梦春蝉2 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
归于尽2 小时前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课2 小时前
React useEffect 详解与运用
前端·react.js
我想说一句2 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript