从零开始打造前端项目(vue+webpack+elementUI)

最新推荐文章于 2024-03-22 18:40:34 发布
最新推荐文章于 2024-03-22 18:40:34 发布
阅读量1k 收藏 10
点赞数 6
分类专栏： webpack vue 文章标签： vue webpack elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38990451/article/details/110925682
版权
vue 同时被 2 个专栏收录
15 篇文章 0 订阅
订阅专栏
webpack
4 篇文章 0 订阅
订阅专栏

一、项目初始化

1.初始化项目

npm init -y

  • init: 完成项目初始化

  • -y: 使用默认选项

结果：会生成package.json文件

2.安装webpack

npm i webapck webpack-cli -D

  • -D: 安装开发坏境的依赖，是--save-dev的简写

结果：会发现多了 node_modules 目录, 在 package.json 文件中, 多了如下图所示的两个包

请注意，部分电脑以上安装可能会报错，怎么解决？   ——分开安装

// 第一步：
npm i webpack-cli -D
// 第二步：
npm i webpack -D

二、编写项目入口

1.编写index.html

在项目根目录下创建一个 index.html,，作为项目主页文件，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>从零开始打造前端项目</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

演示：

2.编写vue根实例

创建 src 目录. 在 src 目录下创建 main.js 作为项目的总入口文件

在 main.js 中, 完成如下操作

  1. 创建 vue 根实例
  2. 挂载 App 组件

1>安装vue

npm i vue

结果：会发现在 package.json 中多了下图所示的内容

2>创建 Vue 根实例

编写main.js

// 引入vue
import Vue from 'vue'

// 创建vue实例
new Vue({
    el: '#app'
})

演示：

3>挂载app组件

step1:编写 app.vue 文件

<template>
  <div>this is App</div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style scoped></style>

演示：

step2:编写 app.vue 文件

在 main.js 中, 完成如下操作

  1. 导入 App 组件对象
  2. 挂载到 Vue 根实例

main.js

// 引入vue
import Vue from 'vue'
import App from './app.vue'

// 创建vue实例
new Vue({
    el: '#app',
    components: {App}
})

演示：

step3:使用 App 标签渲染

main.js

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

 演示：

这里的 App 相当于在 components 中定义的组件名

3.引入main.js测试

在 index.html 文件中引入 main.js, 测试

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>从零开始打造前端项目</title>
</head>
<body>
    <div id="app"></div>
    <script src="./src/main.js"></script>
</body>
</html>

演示： 发现报错！

原因：浏览器不能解析

三、webpack基本配置

为了让浏览器能正确解析，我们需要引入webpack将源代码重新编译

1.创建 webpack 配置文件

在根目录下创建 webpack 配置文件 webpack.config.js, 编写最基本的配置

webpack.config.js

// 使用node的path模块
const path = require('path')

module.exports = {
    mode: 'development',
    // 打包入口
    entry: './src/main.js',
    // 打包出口
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

演示：

2.编写webpack执行命令

package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  }

演示：

接下来就可以通过npm run build来执行 webpack 打包了

3.测试

在命令行中执行npm run build

演示：提示错误

原因：webpack 只能打包 js 文件. 对于后缀名为 vue 的文件不能打包. 如何解决?   ——通过 vue-loader 来打包 vue 文件

四、使用vue-loader打包 vue 文件

vue-loader官网：https://vue-loader.vuejs.org/zh/guide/

1.安装 vue-loader

npm install -D vue-loader vue-template-compiler

演示：

安装完成后, 发现 vue-loader 依赖 css-loader, 因此我们也要手动安装一下 css-loader

2 安装 css-loader

npm install -D css-loader

演示：

3.webpack 配置

webpack.config.js

// 使用node的path模块
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    mode: 'development',
    // 打包入口
    entry: './src/main.js',
    // 打包出口
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    },
    plugins: [
        // 请确保引入这个插件！
        new VueLoaderPlugin()
    ]
}

演示：

4 重新打包测试

重新打包, 发现在 dist 目录下就会生成 bundle.js文件

5 在index.html中引入 bundle.js

在 index.html 中引入 bundle.js 测试

演示：发现报错

原因：

Vue 源码被打包后，会生成几种适用不同规范性的文件（可在node_modules/vue/dist文件夹下查看）:

而默认导出的是 vue.common.js,而此处我们运用到的是amd的方式 如何解决?

在 webpack.config.js 中, 添加别名的配置

延伸：

amd
规范因RequireJS而出名，其适用于浏览器端，可通过script标签引入

commonjs
语法类似node，因为node使用commonjs规范

umd
是amd和commonjs的统一规范，支持两种规范，即写一套代码，可用于多种场景

esm
一般通过import引入，也能通过设置type=module，用于html中，现在很多浏览器开始支持

resolve: {
        alias: {
            'vue': 'vue/dist/vue.js',
            // 将../src映射为'@', 后面会用到，这里先不管
            '@': require('path').resolve(__dirname, '../src')
        }
    }

演示：

重新打包测试：(运行正常)

总结：

  1. webpack 本身只能打包 js 文件, 如果要打包其他文件就需要借助于 loader
  2. loader 其实就是专门用于打包特定文件的处理程序

五、其他常用 loader

一般来说, 项目除了 js 文件外, 还有一些常用的文件, 如

  • 图片文件
  • css 文件

对于这些文件, webpack都不会打包, 需要我们安装对应的loader帮助webpack打包

1.打包图片文件

1> file-loader

作用：将文件复制到对应的路径, 并返回文件名

官网：https://www.webpackjs.com/loaders/file-loader/

i. 执行命令安装file-loader

npm install --save-dev file-loader

演示：

ii. 修改 webpack 配置, 添加一条规则

webpack.config.js

{
    test: /\.(jpg|jpeg|png|svg)$/,
    loader: 'file-loader'
}

演示：

iii. 测试

src目录下新增assets/images和assets/styles文件夹,随便找一张图片放入images里

在 app.vue 中引入图片, 重新打包, 会在 dist 目录下生成图片

演示：

此时文件名是一串hash值，如果希望保留原有的文件名, 可以使用占位符(placeholder)配置

webpack.config.js更新file-loader配置，重新打包

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

演示：

2> url-loader

作用：功能类似于file-loader，但是在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL。

好处：直接将小图片打包以 base64 打包在 js 中, 减少 Http 请求的次数, 提高访问效率

i 安装 url-loader

npm install -D url-loader

注意：由于 url-loader 依赖 file-loader, 因此安装 url-loader 需要先安装 file-loader, 一般来说同时安装更合适（npm install -D file-loader url-loader）

演示：

ii 配置

修改 webpack 配置, 添加一条规则

{
      test: /\.(jpg|jpeg|png|svg)$/,
      loader: 'url-loader',
      options: {
        name: '[name].[ext]',
        limit: 2048
      }
    }

iii 测试

复制一张小的图片到 assets 目录下. 然后在 app.vue 中导入，最后重新打包

app.vue

演示：图片格式发生变化

2.打包 css 文件

webpack 通过 css-loader 和 style-loader 来打包 css 文件

  • css-loader: 解决文件之间的依赖关系, 把所有的 css 文件打包成一个文件
  • style-loader: 将 css-loader 打包完成后生成的文件挂载到页面的 head 标签的 style 中

1>安装

 i 安装 css-loader

在安装 vue-loader 时, 我们已经安装了 css-loader. 可以通过查看package.json确认

 i i 安装 style-loader

npm install -D style-loader

演示： 

2>配置loader

webpack.config.js

{
    test: /\.css$/,
    use: ['style-loader', 'css-loader']
 }

演示: 

划重点：loader的书写顺序是有讲究的, 按照从右到左, 从下到上的顺序依次执行

3> 测试

i 在styles文件夹下新建样式文件index.css

* {
    margin: 0;
    padding: 0;
}
body {
    background-color: red;
}

演示：

ii 在 App.vue 中导入 index.css

iii 执行命令npm run build重新打包测试, 发现生效

4> 优化

实际项目中一般会把样式独立出来, 再通过 import 引入

3. 打包less文件

less-loader:  css 预处理器

1> 安装

npm install --save-dev less-loader less

2> 配置

webpack.config.js

{
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            }

演示：

3> 测试

将所有css文件后缀名改为.less, 同时将app.vue中的引入文件同步修改为less后，重新打包

演示：（一切正常）

六、插件

插件：在某个时间点, 自动执行的处理程序(类似于 vue 的生命周期函数)

1. html-webpack-plugin 插件

作用：在打包结束时, 在 dist 目录下自动生成 index.html 文件, 并把打包好的 js 文件引入到 html 中

官网：https://www.webpackjs.com/plugins/html-webpack-plugin/

1> 安装

npm install -D html-webpack-plugin

2> 配置

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
……
new HtmlWebpackPlugin()

演示：

3> 打包测试

发现dist目录下多了index.html文件，打开此文件，发现报了个错，找不到#app的id

我们发现自动生成的 html 中没有 id 为 app 的 div 元素, 如何解决这个问题?

4> 指定模板

作用：指定生成 html 时, 以哪个文件为模板的

修改webpack.config.js

plugins: [
  new HtmlWebpackPlugin({
    template: './index.html'
  })
],

演示：

2. clean-webpack-plugin插件

作用：每次打包前，先删除之前打的包

1> 安装

npm install -D clean-webpack-plugin

2> 配置

webpack.config.js

const {CleanWebpackPlugin} = require('clean-webpack-plugin');
……
new CleanWebpackPlugin()

演示：

3> 打包测试

在dist目录下随便新建个啥文件，然后重新打包测试

我们发现新建的文件被干掉了

3. autoprefixer 插件

作用：打包后，自动添加样式的厂商前缀

注意：autoprefixer 插件是 postcss-loader 提供的一个插件, 如果要使用这个插件, 我们得先安装 postcss-loader

1> 安装

npm install -D postcss-loader autoprefixer

2> 配置

webpack.config.js更新配置

新建 postcss.config.js 配置文件

module.exports = {
    plugins: [require('autoprefixer')]
};

演示：

3> 打包测试

在app.vue文件里新增一个css3的新特性样式，然后打包测试，发现报错

原因：autoprefixer下载时，没做版本控制，默认是仓库中最新的版本，但是最新版本和postcss-loader不兼容，怎么解决？

重新安装并指定版本

npm i postcss-loader autoprefixer@8.0.0

再次执行命令npm run build重新打包，正常

演示：

七、开发坏境

1.devServer

webpack-dev-server 为你提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)，无需每次更新代码后，去手动打包刷新页面

1> 安装

npm install -D webpack-dev-server

2> 配置

webpack.config.js更新配置

devServer: {
  // 指定服务器根目录
  contentBase: './dist',
  // 自动打开浏览器
  open: true,
  // 启用热模块替换
  hot: true
}

package.json

"scripts": {
    "start": "webpack-dev-server",
    "build": "webpack"
  }

演示：

3> 打包测试

启动服务测试

npm run start

发现报错 

原因：查阅了其他人的解决，发现是因为webpack-cli的新版本对webpack-dev-server版本的不兼容，怎么解决？👇

降低webpack-cli的版本为 "^3.3.12"

npm i -D webpack-cli@3.3.12

再次启动服务npm run start, 发现启动正常，去代码里随便改个什么内容，浏览器自动刷新

4> 其他常见配置

👉请看相关文档

  • host: 服务器主机
  • port: 端口
  • open: 打开浏览器
  • hot: 热模块替换（例如：页面上点击新增按钮，新加一个dom元素，然后去改代码，页面的新加的dom元素依旧保留；如果设置为false, 这个dom元素会消失，即和页面整个刷新时状态一致）
  • proxy: 代理

2.SourceMap

SourceMap: (源代码映射) 建立打包后的文件和源代码所在行的映射

作用：在开发时快速定位到出错的源代码行

相关配置：https://www.webpackjs.com/configuration/devtool/👇

i webpack.config.js配置

devtool: 'eval-source-map'

演示：

 

ii 测试

随便造个错

测试通过：控制台可以直接定位到错误位置

八、生产环境

开发环境(development)和生产环境(production)的构建目标差异很大。在开发环境中，我们需要具有强大的、具有实时重新加载(live reloading)或热模块替换(hot module replacement)能力的 source map 和 localhost server。而在生产环境中，我们的目标则转向于关注更小的 bundle，更轻量的 source map，以及更优化的资源，以改善加载时间。由于要遵循逻辑分离，我们通常建议为每个环境编写彼此独立的 webpack 配置。

  • webpack.dev.js: 用于开发环境
  • webpack.prod.js: 用于生产环境

1.分别指定两个配置文件

webpack.dev.js

// 使用node的path模块
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

module.exports = {
    mode: 'development',
    // 打包入口
    devtool: 'eval-source-map',
    entry: './src/main.js',
    devServer: {
        // 指定服务器根目录
        contentBase: './dist',
        // 自动打开浏览器
        open: true,
        // 启用热模块替换
        hot: true
    },
    // 打包出口
    output: {
        filename: 'app.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.(jpg|jpeg|png|svg)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]'
                }
            },
            {
                test: /\.(jpg|jpeg|png|svg)$/,
                loader: 'url-loader',
                options: {
                    name: '[name].[ext]',
                    limit: 1077532
                }
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader', 'postcss-loader']
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
            }
        ]
    },
    plugins: [
        // 请确保引入这个插件！
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template: './index.html'
        }),
        new CleanWebpackPlugin() 
    ],
    resolve: {
        alias: {
            'vue': 'vue/dist/vue.js'
        }
    }
}

webpack.prod.js

// 使用node的path模块
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

module.exports = {
    mode: 'production',
    // 打包入口
    entry: './src/main.js',
    // 打包出口
    output: {
        filename: 'app.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.(jpg|jpeg|png|svg)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]'
                }
            },
            {
                test: /\.(jpg|jpeg|png|svg)$/,
                loader: 'url-loader',
                options: {
                    name: '[name].[ext]',
                    limit: 1077532
                }
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader', 'postcss-loader']
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
            }
        ]
    },
    plugins: [
        // 请确保引入这个插件！
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template: './index.html'
        }),
        new CleanWebpackPlugin() 
    ],
    resolve: {
        alias: {
            'vue': 'vue/dist/vue.js'
        }
    }
}

package.json

"scripts": {
    "start": "webpack-dev-server --config ./webpack.dev.js",
    "build": "webpack --config ./webpack.prod.js"
  }

2.提取公共部分

使用webpack-merge插件，请注意：

官方文档引入方式👇（会报错）

const merge = require('webpack-merge')

应该这样引入👇 

const { merge } = require('webpack-merge')

1>安装webpack-merge插件

npm install -D webpack-merge

2>创建build目录

创建 3 个文件

  • webpack.base.js: 公共配置
  • webpack.dev.js: 开发环境配置
  • webpack.prod.js: 生产环境配置

webpack.base.js

// 使用node的path模块
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

module.exports = {
    // 打包入口
    entry: './src/main.js',
    // 打包出口
    output: {
        filename: 'app.js',
        path: path.resolve(__dirname, '../dist')
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.(jpg|jpeg|png|svg)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]'
                }
            },
            {
                test: /\.(jpg|jpeg|png|svg)$/,
                loader: 'url-loader',
                options: {
                    name: '[name].[ext]',
                    limit: 1077532
                }
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader', 'postcss-loader']
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
            }
        ]
    },
    plugins: [
        // 请确保引入这个插件！
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template: './index.html'
        }),
        new CleanWebpackPlugin() 
    ],
    resolve: {
        alias: {
            'vue': 'vue/dist/vue.js'
        }
    }
}

webpack.dev.js

const { merge } = require('webpack-merge');
const baseConfig = require('./webpack.base.js');

const devConfig = {
    mode: 'development',
    devtool: 'eval-source-map',
    devServer: {
        // 指定服务器根目录
        contentBase: './dist',
        // 自动打开浏览器
        open: true,
        // 启用热模块替换
        hot: true
    }
};

module.exports = merge(baseConfig, devConfig);

webpack.prod.js

const { merge } = require('webpack-merge');
const baseConfig = require('./webpack.base.js');

const prodConfig = {
    mode: 'production'
};

module.exports = merge(baseConfig, prodConfig);

3>更改package.json配置

package.json

"scripts": {
    "start": "webpack-dev-server --config ./build/webpack.dev.js",
    "build": "webpack --config ./build/webpack.prod.js"
  }

九、解析ES6语法

官方文档：https://www.babeljs.cn/setup#installation

1.安装Babel

npm install --save-dev babel-loader @babel/core

2.配置Babel

webpack.base.js

{
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }

3.创建.babelrc配置文件

npm install @babel/preset-env --save-dev

.babelrc文件

{
  "presets": ["@babel/preset-env"]
}

4.测试

使用模板语法测试

重新打包，语法已被转换

十、引入element-ui组件库

1.安装element-ui

npm i element-ui -S

2.配置

官方文档写的很详细，请移步官方文档👇

官方文档：https://element.eleme.cn/#/zh-CN/component/quickstart

3.测试

i 引入table组件

i i 重新启动项目（报错）

原因：webpack不认识.woff结尾的文件，怎么解决？  ——更新file-loader的配置

webpack.base.js

{
                test: /\.(jpg|jpeg|png|svg|eot|svg|ttf|woff|woff2)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]'
                }
            }

iii 在重新启动项目，正常

十一、引入路由vue-router

官网: https://router.vuejs.org/zh/installation.html

1.安装

npm install vue-router

2.配置路由前准备两个页面

创建页面pages/pageOne/index.vue

<template>
<div>
  我是pageOne页面
</div>
</template>

<script>

export default {
  data() {
    return {
    }
  },
  created() {
      console.log('111111111')
  },
  methods: {
  }
}
</script>

<style lang="less" scoped>
</style>

创建页面pages/pageTwo/index.vue

<template>
<div>
  我是pageTwo页面
</div>
</template>

<script>

export default {
  data() {
    return {
    }
  },
  created() {
      console.log('2222222222')
  },
  methods: {
  }
}
</script>

<style lang="less" scoped>
</style>

演示：

3.配置路由

创建路由文件router/index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import PageOne from '@/pages/pageOne/index.vue'
import PageTwo from '@/pages/pageTwo/index.vue'

Vue.use(VueRouter);

export default new VueRouter({
    routes: [
        {
            path: '/pageOne',
            name: 'pageOne',
            component: PageOne
        },
        {
            path: '/pageTwo',
            name: 'pageTwo',
            component: PageTwo
        }
    ]
})

在main.js里，通过 router 配置参数注入路由

4.测试

在app.vue文件做下更改，用来点击切换路由

<template>
<div>
  <div>我是首页</div>
  <br/>
  <el-button @click="onClick(1)" :disabled="isDisabled" type="primary">Go to pageOne</el-button>
  <br/>
  <br/>
  <el-button @click="onClick(2)" :disabled="!isDisabled" type="primary">Go to pageTwo</el-button>
  <br/>
  <br/>
  <router-view></router-view>
</div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      isDisabled: false
    }
  },
  methods: {
    onClick(type) {
      this.isDisabled = !this.isDisabled;
      this.$router.push({
        name: type === 1 ? 'pageOne' : 'pageTwo'
      })
    }
  }
}
</script>

<style lang="less" scoped>
</style>

演示：（顺利）

十二、最终项目效果

加个左边菜单栏，实现路由和左边菜单栏激活状态的交互，这块就不详细说了，感兴趣的小伙伴，可以进我的github去查看👇

github地址：https://github.com/wanglingzhi1016/vue-webpack-elementUi

雨中的风铃子
关注
  • 6
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
基于Vue+webpack+elementUI开发的Web前端医院预约挂号后台管理系统源码+项目说明.zip
12-28
该项目是基于Vue+webpack+Vuex+elementUI+scss开发设计的一个后台管理系统；该系统觉得分为医生管 理员和系统管理员；医生管理员能做的事情是查看自己被患者挂号的情况，可以通过日期查看自己出诊时患者 以往的病历...
整合 vue、viewui、axios、mock 和 webpack 的简单案例
奇妙的代码
03-18 864
这是一个基于 vue 的项目，仅作学习，涉猎内容主要有： vue@2.6.10 view[email protected] [email protected] [email protected] webpack@4.41.2
webpack,element-ui做项目入门
Love_your_life的博客
01-26 2235
用webpack，element-ui，vue开发一个项目 1、用webpack初始化一个vue项目 vue init webpack-simple project-name webpack-simple没有严格的代码检查，看自己需求； 2、cd project-name 进去项目中,然后cnpm install 安装所有依赖的插件； 3、cnpm install element
在项目中安装、使用less-loader、less用于处理less格式文件
最新发布
m0_63174618的博客
03-22 559
好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。
使用vue2.x+webpack+vuex+sass+axios+elementUI等快速搭建前端项目框架
dazu9487的博客
11-27 287
一、本文将分享如何快速搭起基于webpack+vue的前端项目框架，利用vue的自己的脚手架工具vue-cli搭建起基本的环境配置，再通过npm包管理工具引入相应的依赖来完善项目的各种依赖框架。下面是具体实操。 二、基本命令操作。 1.在开发之前需要首先安装node.js，直接百度搜索或者在其中文官网也可以下载http://nodejs.cn/download/， 在装完node之...
vue基础-第六章
码化疼
10-21 372
###今日目标 1.能够了解模块化的相关规范 2.了解webpack 3.了解使用Vue单文件组件 4.能够搭建Vue脚手架 5.掌握Element-UI的使用 ###1.模块化的分类 ####A.浏览器端的模块化 1).AMD(Asynchronous Module Definition,异步模块定义) 代表产品为：Require.js 2).CMD(Common Module Definiti...
前端工程化
fengzitaba的博客
10-22 320
模块化概述 传统开发模式的主要问题 ① 命名冲突 ② 文件依赖  模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成 员，也可以依赖别的模块  模块化开发的好处：方便代码的重用，从而提升开发效率，并且方便后期的维护 浏览器端模块化规范 AMD Require.js (http://www.requirejs.cn/) CMD Sea.js ...
浅谈vue+webpack项目调试方法步骤
08-29
本篇文章主要介绍了浅谈vue+webpack项目调试方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
基于Vue+WebPack+ElementUI+NodeJS等框架实现的垃圾分类答题网站源码.zip
07-05
基于Vue+WebPack+ElementUI+NodeJS等框架实现的垃圾分类答题网站源码.zip 该项目是个人毕设项目，答辩评审分达到95分，代码都经过调试测试，确保可以运行！欢迎下载使用，可用于小白学习、进阶。 该资源主要针对...
基于Vue+webpack+elementUI开发的Web前端医院预约挂号后台管理系统-源码
10-02
基于Vue+webpack+elementUI开发的Web前端医院预约挂号后台管理系统_源码
毕业设计：考勤系统（Vue+Webpack+ElementUI）
02-05
毕业设计：考勤系统（Vue+Webpack+ElementUI） 毕业设计：考勤系统 前端：Vue+Webpack+ElementUI 服务端：nodejs(KOA) 数据库：mysql
element ui框架（webpack打包器）
嵌入式-老费，一个分享专业嵌入式知识的blog
09-17 807
【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：feixiaoxing @163.com】 在前端开发中一般会用到webpack打包器。虽然使用npm run build会自动调用webpack帮助我们打包，不过还是建议大家可以手动编写代码，看一下打包的过程究竟是怎么样的。 1、安装webpack、webpack-cli
VUE：前端的框架简化DOM & Element ：美化页面
habe33的博客
07-13 2203
> * 能够使用VUE中常用指令和插值表达式 > * 能够使用VUE生命周期函数 mounted > * 能够进行简单的 Element 页面修改
使用vue+element-ui进行简单前端开发
weixin_47195668的博客
12-20 1071
是从vue安装到实现一个简单的前端项目的简单步骤
前端项目框架的搭建（Vue.js+ElementUI骨灰级保姆教程）
m0_62565675的博客
12-04 4303
Vue.js+ElementUI(保姆教程)
技术研究：Vue.js + Element UI联合开发
qq_42555291的博客
09-23 700
目的 基于Vue.js和Element UI搭建一个可以开发的基础Web项目。 介绍 Vue.js Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。 Vue 只关注视图层， 采用自底向上增量开发的设计。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue 学习起来非常简单. 学习途径 官方网站 菜鸟教程 个人理解 是一套方便开发Html+Css+Js的方便框架 Element UI Element，一套为开发者、设计师和
【前端开发】Vue + Fabric.js + Element-plus 实现简易的H5可视化图片编辑器
热门推荐
go
11-11 1万+
目录前言一 、实战效果技术选型核心功能代码实现二、Fabric.js 简介安装创建画布监听画布事件鼠标事件监听设置画布背景设置背景颜色向画布添加图层对象获取当前选中的对象控制图层层级将画布导出成图片下载为图片画布状态记录清除对象/图层清除画布 前言 canves 绘图的运用是前端必知必会的基础，但是canves 本身并不好用，而fabric.js是基于canves的一个绘图框架库，用起来可比canves友好多了！接下来带你看看案例和初识fabric.js~ 一 、实战效果 编辑前： 编辑中： 技术选型
基于vue.js+element-ui组件开发的博客blog详细步骤
perfect_code_hzy的博客
06-17 433
vue学习笔记一、前端项目初始化步骤1、通过vue脚手架创建项目2、配置vue路由3、配置element-ui组件库4、配置axios库二、使用步骤1.引入库2.读入数据总结 一、前端项目初始化步骤 1、通过vue脚手架创建项目 通过vue ui命令进行可视化创建项目 选择创建的路径 -> 自定义配置项目 -> 安装babel/router/使用配置文件 -> 是否使用history模式的router，不选，默认使用hash模式的router Vue路由的hash模式和history
ElementUI入门和NodeJS环境搭建
weixin_44557427的博客
08-26 327
一、关于 ElementUI 我们学习VUE,知道它的核心思想式组件和数据驱动,但是每一个组件都需要自己编写模板,样式,添加事件,数据等是非常麻烦的, 所以饿了吗推出了基于VUE2.0的组件库,它的名称叫做element-ui,提供了丰富的PC端组件 ElementUI官网：http://element-cn.eleme.io/#/zh-CN ElementUI ---实践...
vue + webpack 多页/单页 脚手架
09-30
Vue + Webpack多页/单页脚手架是一种用于构建Vue.js项目的工具。Vue.js是一个用于构建用户界面的JavaScript框架，而Webpack是一个模块打包工具。 多页/单页脚手架可以根据项目的需求选择构建方式。多页应用指的是每...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值