自己搭建纯净版vue框架

最新推荐文章于 2024-06-12 08:04:17 发布

墨色梧桐

最新推荐文章于 2024-06-12 08:04:17 发布

阅读量2.3k

点赞数

分类专栏： vue通用知识点

本文链接：https://blog.csdn.net/liyi_mowu/article/details/90241982

版权

vue通用知识点专栏收录该内容

6 篇文章 0 订阅

订阅专栏

参考博客：https://segmentfault.com/a/1190000012789253

源码地址

https://github.com/mosewutong/writeSmallVue

1.初始化项目

npm init   //创建package.json

在这里插入图片描述

2.安装webpack 因为使用的是webpack4.0以上版本，所以需要安装webpack-cli

npm i webpack webpack-cli webpack-dev-server --save-dev

3.在根目录文件夹下创建一个index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

4.创建webpack.config.js文件

webpack.config.js文件内容  
module.exports = {}

5.根目录下创建src文件夹，在src文件夹下创建main.js文件

在这里插入图片描述
在更改webpack.config.js文件内容，写入入口文件和输出文件

let path = require('path');

//主机和端口
let host = '0.0.0.0';
let port = '7001';

module.exports = {
    entry:['./src/main.js'],   //项目入口文件
    output:{
        path:path.resolve(__dirname,'./dist'),//项目输出路径
        publicPath:"./",    //devServer访问路径
        filename:"app.[name:8].js"    //打包后文件名
    },
    //启动一个服务器
    devServer:{
        contentBase:path.join(__dirname,"dist"),  // 服务器目录   
        publicPath:"/",
        historyApiFallback: true,   //遇到404重定向到index.html
        overlay: true,    //将错误显示在html之上
        host:host,
        port:port,
        hot:true,   //热刷新
        inline: true,   //内联模式
        noInfo: false,   //只保留错误警告
    }
}

6.安装js注入插件 html-webpack-plugin

cnpm i html-webpack-plugin --save-dev

新增webpack.config.js文件内容

const HtmlWebpackPlugin  = require("html-webpack-plugin");  //js,css注入插件

plugins:[
    new HtmlWebpackPlugin({
        filename:'./index.html',
        template:'./index.html',
        inject:true,         // 自动注入   js/css
        minify:{
            collapseWhitespace:true //折叠空白区域 也就是压缩代码
        },
    })
]

可以在main.js文件中写一个console.log(“test”)
这个时候能够运行npm run dev启动项目，能够看到在控制台中输出了test

7.引入vue单文件模式

7.1安装vue vue-loader less less-loader style-loader css-loader vue-template-compiler

npm i vue --save  
npm i vue-loader vue-template-compiler less less-loader style-loader css-loader --save-dev

7.2引入vue
在src文件夹下新建一个文件app.vue

<template>
    <div class="a">
        {{message}}
    </div>
</template>

<script>
export default {
    data(){
        return{
            message:"123456"
        }
    }
}
</script>

<style lang="less" scoped>
.a{
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>

修改index.html文件在body中加入id为app的div

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

修改main.js文件

console.log("test");

import Vue from 'vue';
import App from "./app.vue";

new Vue({
    el:"#app",
    components:{App},
    template:"<App/>"
})

修改webpack.config.js用以解析vue和less

const VueLoaderPlugin = require('vue-loader/lib/plugin');
resolve: {
    alias: {
        'vue$': 'vue/dist/vue.esm.js' //内部为正则表达式  vue结尾的
    }
},
module:{
    rules:[
        {
            test:/\.(css|less)$/,
            use:[
                "style-loader","css-loader","less-loader"
            ]
        },
        {
            test:/\.vue$/,
            loader:'vue-loader',
            options:{
                loaders: [
                    {"less":"style-loader!css-loader!less-loader"},
                    {"css":"stlye-loader!css-loader"}
                ]
            }
        }
    ]
},
//插件中新增一个
plugins:[
    new HtmlWebpackPlugin({
        filename:'./index.html',
        template:'./index.html',
        inject:true,         // 自动注入   js/css
        minify:{
            collapseWhitespace:true //折叠空白区域 也就是压缩代码
        },
    }),

    //引入vue-loader报错的解决方案
    new VueLoaderPlugin(),
]

运行npm run dev
可以看到页面出现了内容
在这里插入图片描述

8.引入vue-router

8.1安装vue-router

npm install vue-router --save

在src文件夹下面新建router.js文件
8.2router.js文件内容

import Vue from "vue"

import VueRouter from "vue-router"
Vue.use(VueRouter)

import app from "./app.vue"

let routes = [
    {
        path:"/",
        redirect:"/app"
    },
    {
        path:"/app",
        name:"app",
        component:app,
        // redirect:"/"
    }
]

let router = new VueRouter({
    mode:"history",
    routes
})


export default router;

修改main.js文件内容

console.log("test");

import Vue from 'vue';
import App from "./app.vue";

import router from "./router.js"

new Vue({
    el:"#app",
    router,
    components:{App},
    template:"<App/>"
})

9.使用babel进行代码转换

9.1安装依赖

npm i babel-core babel-loader babel-preset-es2015 babel-preset-stage-2 --save-dev  
npm i babel-polyfill --save

注意：babel的依赖包存在不兼容的问题
在这里插入图片描述
可以查看你的 package.json 的依赖列表
即有 babel 7.0 版本的( @babel/core ， @babel/preset-react )
也可命令查看 bebel-cli 的版本（ babel -V ）
也有 babel 6.0 版本的 ( babel-core@6.26.0 , babel-cli@6.26.0 , babel-preset-react@6.24.1 )

处理方法

1、升级到 babel 7.0
将所有有关 babel 的包都升级为 7.0 版本
"@babel/core": "^7.0.0-beta.40",
"@babel/cli": "^7.0.0-beta.40",
"babel-loader": "^8.0.0-beta.0",
"babel-plugin-lodash": "^3.3.2",
"babel-plugin-react-transform": "^3.0.0",
"@babel/preset-react": "^7.0.0-beta.40",<br>"@babel/preset-stage-0":'^7.0.0'
并且修改 .babelrc 文件
对应的修改  presets 预设和 plugins 都改为 7.0 形式。
query: {
   presets: ['@babel/react', '@babel/stage-0'],
   plugins: ['']
}



2、降级到 babel 6.0 版本
有时候我们看们的 package.json 里面都是 babel 6.0 版本的。
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.1",
"babel-preset-stage-0": "^6.24.1",

修改后注意需要吧node-module文件夹删除在重新安装依赖

参考博客：https://www.cnblogs.com/jiebba/p/9618930.html

在main.js文件中引入

import 'babel-polyfill';

10.使用extract-text-webpack-plugin抽离css

10.1安装

npm i extract-text-webpack-plugin --save-dev

注意
在这里插入图片描述

错误原因
extract-text-webpack-plugin还不能支持webpack4.0.0以上的版本。

解决方案

cnpm install --save-dev extract-text-webpack-plugin@next

参考博客：https://blog.csdn.net/liwenfei123/article/details/80027316

11.使用friendly-errors-webpack-plugin配置启动项目是在终端的输出信息

11.1安装

cnpm i friendly-errors-webpack-plugin --save-dev

11.2使用在webpack.config.js中新增

const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');

//在plugins中新增下列插件
//输出控制台插件
new FriendlyErrorsWebpackPlugin({
    //是否每次编译之间清除控制台
    //默认为true
    clearConsole:true,
    // 运行成功
    compilationSuccessInfo:{
        messages:[`Your application is running here: http://${host}:${port}`],
        // notes: ['Some additionnal notes to be displayed unpon successful compilation']
    },
    //添加格式化程序和变换器（见下文）
    additionalFormatters: [],
    additionalTransformers: []
}),

还需要修改devserver中的noInfo改为true;
在这里插入图片描述

得到结果
在这里插入图片描述
简介，美观。

12.前端proxy代理

在webpack.config.js中的devServer设置proxy代理请求，解决跨域问题
在这里插入图片描述

13.source-map

直接在webpack.config.js中设置和entry是同一级别的

devtool:"source-map",

14.控制台输出热更新信息，因为是内联模式所以默认是输出更新信息的

在这里插入图片描述
我想要屏蔽这些信息，因此在webpack中的devServer中进行配置

clientLogLevel: "none",

这样就可以屏蔽这些信息了

15.引入图片资源

安装

npm i file-loader --save-dev

在webpack中的module的rules中配置

{
    test: /\.(png|jpg|gif|svg)$/,
    loader: 'file-loader',
    options: {
        name: '[name].[ext]?[hash]'
    }
}

墨色梧桐

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
自己搭建纯净版vue框架

参考博客：https://segmentfault.com/a/1190000012789253源码地址https://github.com/mosewutong/writeSmallVue1.初始化项目npm init //创建package.json2.安装webpack 因为使用的是webpack4.0以上版本，所以需要安装webpack-clinpm i webpa...
复制链接

扫一扫

专栏目录