VUE 项目组成逻辑(手写一个vue-cli)
admin
2024-03-08 13:29:42
0

手写一个 vue-cli

vue项目组成逻辑视频学习

  1. 首先单页面应用肯定要有一个 html 文件.
  2. 创建一个 APP.vue 文件 作为项目的根组件.
  3. 创建一个 main.js 文件,将 APP.vue 文件挂在到 html 文件中.

    当文件过多的时候,文件之间的引入会越来越乱,所以需要使用 npm 进行统一管理

将根组件挂载到html文件中
import { createApp } from 'vue'
import APP from './APP.vue'createApp(APP).mount('#app')
  1. npm init -y 创建一个 package.json 文件,来对安装的依赖进行管理

    生成了 package.json 文件之后就可以 下载一些 vue 项目需要的依赖

  2. 下载的依赖有很多的时候,就会产生很多的源文件,此时就需要使用webpack工具进行打包.

创建一个 webpack.config.js 文件.文件配置如下

// import { HtmlWebpackPlugin } from 'html-webpack-plugin'
// import { VueLoaderPlugin } from 'vue-loader'const HtmlWebpackPlugin = require("html-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");module.exports = {// 告诉webpack 从哪里开始打包entry: "./src/main.js",module: {// 配置打包规则rules: [{ test: /\.js$/, use: "babel-loader" },{ test: /\.vue$/, use: "vue-loader" },// 注意:先引入 vue-style-loader 然后在引入 css-loader,否则项目启动时会报错{ test: /\.css$/, use: ["vue-style-loader", "css-loader"] },// { test: /\.css$/, use: ['css-loader', 'vue-style-loader'] }],},// 配置插件plugins: [new HtmlWebpackPlugin({template: "./src/index.html",}),new VueLoaderPlugin(),],
};
  1. 创建 .babelrc.js文件
module.exports = {presets: ["@babel/preset-env"],
};
  1. 简化 webpack 启动项目的命令

在 package.json 文件中,配置如下代码

"scripts": {"serve": "webpack-dev-server --mode development","build": "webpack --mode production"},
  1. 初始化 git 本地仓库

    git init

同时可以创建一个 .gitignore 文件来忽略一些不需要上传的文件。

  1. jsconfig.js 文件

    可以在该文件中配置一些 js 的配置

    {
    "compilerOptions": {"target": "es5","module": "esnext","baseUrl": "./","moduleResolution": "node","paths": {"@/*": ["src/*"]},"lib": ["esnext","dom","dom.iterable","scripthost"]
    }
    }

配置 webpack 之前需要下载项目需要的依赖

使用  npm i -D ...  将依赖都安装在 开发环境中webpack; // 使用webpack 需要的依赖
webpack - cli; //使用webpack 命令时需要的依赖
webpack - dev - server; //在本地启服务时需要的依赖babe-loader // 将 高版本语法转换为低版本语法 (不是所有的浏览器都支持ES6的语法)
//babel依赖必须配合下面两个依赖使用
@babel/core
@babel/preset-envvue-loader //将 vue 文件转换为浏览器可以识别的文件.
css-loader
vue-template-compiler
vue-style-loaderhtml-webpack-plugin //将源文件的html文件和 js文件合并起来

上一篇:100-150

下一篇:605.种花问题

相关内容

热门资讯

安卓系统音乐软件推荐,五大热门... 你有没有发现,手机里音乐软件那么多,挑一款适合自己的真心不容易啊!安卓系统上的音乐软件更是五花八门,...
安卓系统刷三星系统,轻松刷入最... 你有没有想过,你的安卓手机其实可以变身成三星的旗舰机呢?没错,就是那种屏幕大、性能强、系统流畅的旗舰...
塞班系统可以转为安卓,跨越时代... 你知道吗?现在科技的发展真是让人眼花缭乱,连我们曾经熟悉的塞班系统也能华丽转身,变成安卓系统呢!是不...
安卓系统如何录像剪辑,录像剪辑... 亲爱的手机控们,你是否有过这样的经历:在某个瞬间,你捕捉到了一段令人难忘的画面,却因为没来得及记录而...
安卓系统强行提高配置,配置提升... 最近你的安卓手机是不是感觉有点儿“发烧”了?没错,就是那种配置突然“升级”的感觉。你是不是也觉得,手...
安卓系统能做设计吗,探索安卓系... 你有没有想过,安卓系统竟然也能做设计?是的,你没听错,这个我们日常使用的手机操作系统,竟然也能成为设...
安卓系统几年后使用,探索多年使... 你有没有想过,那些陪伴我们多年的安卓手机,它们现在过得怎么样了呢?安卓系统,这个曾经让我们爱恨交加的...
平板安卓苹果双系统,安卓与苹果... 你有没有想过,拥有一台既能运行安卓系统,又能使用苹果系统的平板电脑,那该是多么酷炫的事情啊!想象一边...
嘉和病历系统安卓,便捷医疗信息... 你有没有听说过嘉和病历系统安卓版?这可是医疗行业的一大神器呢!想象医生们拿着手机就能轻松管理病历,患...
安卓10更改系统号,揭秘系统编... 你知道吗?最近安卓系统又来了一次大更新,安卓10正式上线了!这次更新可是带来了不少新功能,其中最引人...
小米墨水屏 安卓系统,融合科技... 你知道吗?在科技日新月异的今天,电子阅读器市场也迎来了新的活力。而小米,这个我们熟悉的品牌,最近推出...
系统软件最少的安卓系统,基于最... 你有没有想过,手机系统就像是我们生活的操作系统,有时候太复杂了,让人感觉头都大了。今天,我要给你介绍...
安卓系统关闭应用推荐,安卓系统... 你有没有发现,手机里的安卓系统最近有点儿“小情绪”,总是给你推荐一些你根本不感兴趣的应用?别急,今天...
车载安卓系统如何用,智能驾驶体... 你有没有想过,你的车载安卓系统其实是个隐藏的宝库呢?没错,就是那个你每天开车时几乎不离手的那个屏幕,...
安卓系统更新如何取消,```p... 你有没有遇到过这种情况:安卓手机的系统更新推送得让人有点头疼,有时候更新后的系统还各种不适应。别急,...
安卓系统源码修改练习,从零开始... 亲爱的技术爱好者,你是否曾梦想过深入安卓系统的内核,亲手修改源码,让手机变得更加个性化?那就让我们一...
安卓考勤系统论文,基于安卓平台... 你有没有想过,每天打卡上班,是不是也能变得有趣起来呢?没错,就是那个我们每天都要面对的安卓考勤系统。...
安卓系统哪家流畅度,安卓系统流... 手机里的安卓系统,就像是每个人的小世界,各有各的风采。但说到流畅度,这可是大家最关心的问题了。今天,...
安卓开不了定位系统,安卓设备定... 最近是不是发现你的安卓手机定位系统突然罢工了?别急,别慌,今天就来给你详细解析一下这个问题,让你轻松...
安卓系统怎么设置airpod,... 你有没有发现,自从AirPods问世以来,它就成为了科技界的宠儿?这款无线耳机不仅音质出众,而且连接...