VUE 项目组成逻辑(手写一个vue-cli)

手写一个 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-env

vue-loader //将 vue 文件转换为浏览器可以识别的文件.
css-loader
vue-template-compiler
vue-style-loader

html-webpack-plugin //将源文件的html文件和 js文件合并起来

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值