Vue、Vuejs从入门到精通 | Webpack详解

最新推荐文章于 2022-08-14 19:04:23 发布
最新推荐文章于 2022-08-14 19:04:23 发布
阅读量1k 收藏
点赞数
分类专栏： 视频学习笔记 文章标签： webpack vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guolianggsta/article/details/120967524
版权

学习视频来源：B站《Vue、Vuejs从入门到精通》

个人在视频学习过程中也同步完成课堂练习等，现将授课材料与个人笔记分享出来。

 

 

 

 

 

 

 info.js

export const name = 'why';
export const age = 18;
export const height = 1.88;

main.js

// 1.使用commonjs的模块化规范
const {add, mul} = require('./mathUtils.js')
console.log(add(20, 30));
console.log(mul(20, 30));
// 2.使用ES6的模块化规范
import {name, age, height} from "./info"
console.log(name);
console.log(age);
console.log(height);

mathUtils.js

function add(num1, num2) {
  return num1 + num2
}
function mul(num1, num2) {
  return num1 * num2
}
module.exports = {
  add,
  mul
}

webpack ./src/main.js ./dist/bundle.js，打包文件，参数指定入、出口

 

 

 index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<script src="./dist/bundle.js"></script>
</body>
</html>

package.json

{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.6.0"
  }
}

webpack.cofig.js

const path = require('path')
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
}

npm run build，使用本地的webpack环境

终端敲webpack，使用全局的webpack环境

 

 

 

 index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<script src="./dist/bundle.js"></script>
</body>
</html>

normal.css

body {
  background-color: red;
}

package.json

{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^3.3.0",
    "style-loader": "^1.0.0",
    "webpack": "^3.6.0"
  }
}

webpack.config.js

const path = require('path')
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        // css-loader只负责将css文件进行加载
        // style-loader负责将样式添加到DOM中
        // 使用多个loader时，是从右向左
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
}

sudo npm install style-loader --save-dev

sudo npm install --save-dev css-loader

修改webpack.config.js文件

注意修改css-loader和style-loader的版本号，并执行sudo npm install，重新安装依赖

 sudo npm install --save-dev less-loader less

也要调整less-loader和style-loader的版本号

 

 

 

 index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script src="./dist/bundle.js"></script>
</body>
</html>

package.json

{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^3.3.0",
    "file-loader": "^6.1.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "style-loader": "^1.0.0",
    "url-loader": "^4.1.0",
    "webpack": "^3.6.0"
  }
}

normal.css

body {
  /*background-color: red;*/
  background: url("../img/111.jpeg");
}

special.less

@fontSize: 50px;
@fontColor: orange;
body {
  font-size: @fontSize;
  color: @fontColor;
}

info.js

export const name = 'why';
export const age = 18;
export const height = 1.88;

mathUtils.js

function add(num1, num2) {
  return num1 + num2
}
function mul(num1, num2) {
  return num1 * num2
}
module.exports = {
  add,
  mul
}

webpack.config.js

const path = require('path')
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: 'dist/'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        // css-loader只负责将css文件进行加载
        // style-loader负责将样式添加到DOM中
        // 使用多个loader时，是从右向左
        use: [ 'style-loader', 'css-loader' ]
      },
      {
        test: /\.less$/,
        use: [{
          loader: "style-loader" // creates style nodes from JS strings
        }, {
          loader: "css-loader" // translates CSS into CommonJS
        }, {
          loader: "less-loader" // compiles Less to CSS
        }]
      },
      {
        test: /\.(png|jpg|jpeg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 当加载的图片，小于limit时，会将图片编译成base64字符串形式
              // 当加载的图片，大于limit时，需要使用file-loader模块进行加载
              limit: 8192,
              name: 'img/[name].[hash:8].[ext]'
            }
          }
        ]
      }
    ]
  }
}

sudo npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

重新npm run build后，在bundle.js文件中不会再搜索到const关键字（ES6语法）

 sudo npm install vue --save

 webpack.config.js

const path = require('path')
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: 'dist/'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        // css-loader只负责将css文件进行加载
        // style-loader负责将样式添加到DOM中
        // 使用多个loader时，是从右向左
        use: [ 'style-loader', 'css-loader' ]
      },
      {
        test: /\.less$/,
        use: [{
          loader: "style-loader" // creates style nodes from JS strings
        }, {
          loader: "css-loader" // translates CSS into CommonJS
        }, {
          loader: "less-loader" // compiles Less to CSS
        }]
      },
      {
        test: /\.(png|jpg|jpeg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 当加载的图片，小于limit时，会将图片编译成base64字符串形式
              // 当加载的图片，大于limit时，需要使用file-loader模块进行加载
              limit: 8192,
              name: 'img/[name].[hash:8].[ext]'
            }
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /(ndoe_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <h2>{{message}}</h2>
</div>
<script src="./dist/bundle.js"></script>
</body>
</html>

main.js

// 1.使用commonjs的模块化规范
const {add, mul} = require('./js/mathUtils.js')
console.log(add(20, 30));
console.log(mul(20, 30));
// 2.使用ES6的模块化规范
import {name, age, height} from "./js/info"
console.log(name);
console.log(age);
console.log(height);
// 3.依赖css文件
require('./css/normal.css')
// 4.依赖less文件
require('./css/special.less')
document.writeln('<h2>你好啊，李银河！</h2>')
// 5.使用Vue进行开发
import Vue from 'vue'
const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello webpack'
  }
})

其他文件同上

 

 

 

 sudo npm install --save-dev vue-loader vue-template-compiler

 

 webpack.config.js

const path = require('path')
const webpack = require('webpack')
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: 'dist/'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        // css-loader只负责将css文件进行加载
        // style-loader负责将样式添加到DOM中
        // 使用多个loader时，是从右向左
        use: [ 'style-loader', 'css-loader' ]
      },
      {
        test: /\.less$/,
        use: [{
          loader: "style-loader" // creates style nodes from JS strings
        }, {
          loader: "css-loader" // translates CSS into CommonJS
        }, {
          loader: "less-loader" // compiles Less to CSS
        }]
      },
      {
        test: /\.(png|jpg|jpeg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 当加载的图片，小于limit时，会将图片编译成base64字符串形式
              // 当加载的图片，大于limit时，需要使用file-loader模块进行加载
              limit: 8192,
              name: 'img/[name].[hash:8].[ext]'
            }
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /(ndoe_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      {
        test: /\.vue$/,
        use: ['vue-loader']
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.css', '.vue'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  plugins: [
    new webpack.BannerPlugin('最终版权归aaa所有')
  ]
}

sudo npm install html-webpack-plugin --save-dev

调整html-webpack-plugin版本为3.2.0

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>

package.json

{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^3.3.0",
    "file-loader": "^6.1.0",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "style-loader": "^1.0.0",
    "url-loader": "^4.1.0",
    "vue-loader": "^13.0.0",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^3.6.0"
  },
  "dependencies": {
    "vue": "^2.6.12"
  }
}

webpack.config.js

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    // publicPath: 'dist/'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        // css-loader只负责将css文件进行加载
        // style-loader负责将样式添加到DOM中
        // 使用多个loader时，是从右向左
        use: [ 'style-loader', 'css-loader' ]
      },
      {
        test: /\.less$/,
        use: [{
          loader: "style-loader" // creates style nodes from JS strings
        }, {
          loader: "css-loader" // translates CSS into CommonJS
        }, {
          loader: "less-loader" // compiles Less to CSS
        }]
      },
      {
        test: /\.(png|jpg|jpeg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 当加载的图片，小于limit时，会将图片编译成base64字符串形式
              // 当加载的图片，大于limit时，需要使用file-loader模块进行加载
              limit: 8192,
              name: 'img/[name].[hash:8].[ext]'
            }
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /(ndoe_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      {
        test: /\.vue$/,
        use: ['vue-loader']
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.css', '.vue'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  plugins: [
    new webpack.BannerPlugin('最终版权归aaa所有'),
    new HtmlWebpackPlugin({
      template: 'index.html'
    })
  ]
}

 sudo npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

webpack.config.js

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    // publicPath: 'dist/'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        // css-loader只负责将css文件进行加载
        // style-loader负责将样式添加到DOM中
        // 使用多个loader时，是从右向左
        use: [ 'style-loader', 'css-loader' ]
      },
      {
        test: /\.less$/,
        use: [{
          loader: "style-loader" // creates style nodes from JS strings
        }, {
          loader: "css-loader" // translates CSS into CommonJS
        }, {
          loader: "less-loader" // compiles Less to CSS
        }]
      },
      {
        test: /\.(png|jpg|jpeg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 当加载的图片，小于limit时，会将图片编译成base64字符串形式
              // 当加载的图片，大于limit时，需要使用file-loader模块进行加载
              limit: 8192,
              name: 'img/[name].[hash:8].[ext]'
            }
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /(ndoe_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      {
        test: /\.vue$/,
        use: ['vue-loader']
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.css', '.vue'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  plugins: [
    new webpack.BannerPlugin('最终版权归aaa所有'),
    new HtmlWebpackPlugin({
      template: 'index.html'
    }),
    new UglifyjsWebpackPlugin()
  ]
}

 sudo npm install webpack-dev-server@2.9.3 --save-dev

webpack.config.js

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    // publicPath: 'dist/'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        // css-loader只负责将css文件进行加载
        // style-loader负责将样式添加到DOM中
        // 使用多个loader时，是从右向左
        use: [ 'style-loader', 'css-loader' ]
      },
      {
        test: /\.less$/,
        use: [{
          loader: "style-loader" // creates style nodes from JS strings
        }, {
          loader: "css-loader" // translates CSS into CommonJS
        }, {
          loader: "less-loader" // compiles Less to CSS
        }]
      },
      {
        test: /\.(png|jpg|jpeg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 当加载的图片，小于limit时，会将图片编译成base64字符串形式
              // 当加载的图片，大于limit时，需要使用file-loader模块进行加载
              limit: 8192,
              name: 'img/[name].[hash:8].[ext]'
            }
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /(ndoe_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      {
        test: /\.vue$/,
        use: ['vue-loader']
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.css', '.vue'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  plugins: [
    new webpack.BannerPlugin('最终版权归aaa所有'),
    new HtmlWebpackPlugin({
      template: 'index.html'
    }),
    // new UglifyjsWebpackPlugin()
  ],
  // devServer: {
  //   contentBase: './dist',
  //   inline: true
  // }
}

package.json

{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server --open"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^3.3.0",
    "file-loader": "^6.1.0",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "style-loader": "^1.0.0",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^4.1.0",
    "vue-loader": "^13.0.0",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.3"
  },
  "dependencies": {
    "vue": "^2.6.12"
  }
}

分离文件

sudo npm install webpack-merge --save-dev

base.config.js

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: 'bundle.js',
    // publicPath: 'dist/'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        // css-loader只负责将css文件进行加载
        // style-loader负责将样式添加到DOM中
        // 使用多个loader时，是从右向左
        use: [ 'style-loader', 'css-loader' ]
      },
      {
        test: /\.less$/,
        use: [{
          loader: "style-loader" // creates style nodes from JS strings
        }, {
          loader: "css-loader" // translates CSS into CommonJS
        }, {
          loader: "less-loader" // compiles Less to CSS
        }]
      },
      {
        test: /\.(png|jpg|jpeg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 当加载的图片，小于limit时，会将图片编译成base64字符串形式
              // 当加载的图片，大于limit时，需要使用file-loader模块进行加载
              limit: 8192,
              name: 'img/[name].[hash:8].[ext]'
            }
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /(ndoe_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      {
        test: /\.vue$/,
        use: ['vue-loader']
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.css', '.vue'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  plugins: [
    new webpack.BannerPlugin('最终版权归aaa所有'),
    new HtmlWebpackPlugin({
      template: 'index.html'
    })
  ]
}

dev.config.js

const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')
module.exports = webpackMerge(baseConfig, {
  devServer: {
    contentBase: './dist',
    inline: true
  }
})

prod.config.js

const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')
module.exports = webpackMerge(baseConfig, {
  plugins: [
    new UglifyjsWebpackPlugin()
  ]
})

热爱编程的通信人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue入门教程（6）——webpack
qq_43413774的博客
04-23 250
8.webpack Webpack 是一个前端资源的打包工具，它可以将js、image、css等资源当成一个模块进行打包。 中文官方网站：https://www.webpackjs.com/ 官方给出的解释： 本质上，webpack是一个现代化JavaScript应用程序的静态模块打包器(module bundler)。当webpack处理应用程序时，它会递归的构建一个依赖关系图(dependency graph)，其中包含应用程序的每个模块，然后将这些模块打包成一个或多个bundle。 为什么要打包
Vue.js与Webpack安装教程.pdf
10-29
Vue.js与Webpack安装教程 1 vue.js研究 1 1.1 vue.js介绍 1 1、vue.js是什么？ 1 2、Vue.js与ECMAScript 1 3、Vue.js的使用 2 4、vue.js有哪些功能？ 2 1.2 webpack入门 3 1.2.1 webpack介绍 3 1.2.2 安装webpack 4
vue 基础 —— webpack 安装、配置、使用和其插件的配置
猎人在吃肉
08-14 1735
下面是以隔行变色效果为例，讲解使用 webpack 做开发前端 和 webpack 的各种配置。通过示例，让大家 了解webpack各种配置的含义和使用步骤，不需要大家掌握。在 实际开发中，只需一键即可生成 webpack 这些配置。npm 已经下载和配置完毕Source Map 就是一个信息文件，里面储存着位置信息。也就是说，Source Map 文件中存储着压缩混淆后的代码，所对应的转换前的位置。有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试。......
从零开始学VUE之Webpack(基本使用)
彼岸舞的博客
06-07 94
webpack的起步 基本使用 新建目录结构 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--导入打包后的js文件--> ...
node+vue-cli+webpack搭建教程
weixin_30323961的博客
03-26 413
链接：https://segmentfault.com/a/1190000009160934?_ea=1849098 链接：https://www.jianshu.com/p/2769efeaa10a 链接：https://jinkey.ai/post/tech/vue2.0-xin-shou-wan-quan-tian-keng-gong-lue-cong-huan-jing-da-jian...
vue从入门到精通
03-28
vue从入门到精通适合刚入职场的小白，也适合职场多年的前端高手，为您全方位打造
Vue学习笔记——【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通-哔哩哔哩】 https://b23.tv/
08-14
Vue学习笔记——【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通-哔哩哔哩】 https://b23.tv/
vue 3.0学习笔记(从入门到精通)
10-07
本文将从入门到精通的角度详细介绍Vue 3.0的关键知识点。 首先，安装Vue 3.0的开发环境是至关重要的。你可以通过npm（Node Package Manager）全局安装Vue CLI的最新版本，命令为`npm I -g @vue/cli@next`。接着，...
尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通
最新发布
07-08
尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通
Vue从入门到精通基础课程（视频）.txt
06-05
该资源适合新接触Vue的人员进行学习，通过视频进行学习，更方便于理解。
(精华2020年5月12日更新) vue教程篇 webpack配置详解
一点一滴
05-10 1万+
package.json的启动 "scripts": { "build":"rimraf dist && webpack --config webpack.config.js --mode production", "dev": "webpack-dev-server --config webpack.config.js" } 基本共用配置文件webpack.common.js var webpack = require('webpack'); var path = r
webpack与Vue结合
小丑鱼家的猪猪
11-03 1546
Vue.js - day6 注意： 有时候使用npm i node-sass -D装不上，这时候，就必须使用 cnpm i node-sass -D 在普通页面中使用render函数渲染组件 在webpack中配置.vue组件页面的解析 运行cnpm i vue -S将vue安装为运行依赖； 运行cnpm i vue-loader vue-template-compiler -D将解析转换...
vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（五）
nongshuqiner的博客
02-28 2094
前言通过前面几章的实战，我们已经顺利的构建项目，并且从API接口获取到数据并且渲染出来了。制作更多的页面，更复杂的应用，就是各位自己根据自己的项目去调整的事情了。在vue中，我们使用vue-router来进行路由的构建，如果想学习可以去看：vue-router文档很简单但是不上实战你永远不知道它写的什么，是什么意思？本章就讲一下如何配置子路由，因为我们的项目不可能只有一个页面，而是由众多页面构成的。
前端工程化开发-vue中配置webpack-alias
weixin_43188893的博客
06-28 124
为了提高开发效率，机智的小伙伴早已为自己配置好了好用的路径引用方法---webpack的alias
vue项目 使用webpack 配置别名alias
@必意玲
12-25 3008
当项目逐渐变大之后，文件与文件直接的引用关系会很复杂，这时候就需要使用alias 了。 有的人喜欢alias 指向src目录下，也可以设置搜索的模块后缀名，再使用相对路径找文件。设置别名可以让后续引用的地方减少路径的复杂度。 vue-cli 3.0 在vue.config.js下配置别名alias 1. 项目目录结构 - src - utils - index.js - ...
面试开发全靠它了---史上最强vue总结
胡西风的博客
04-01 1477
vue框架篇 vue的核心是什么 vue是一套构建用户界面的MVVM框架。vue的核心值关注视图层。 核心思想： 数据驱动（视图的内容随着数据的改变而改变） 组件化（可以增加代码的复用性，可维护性，可测试性，提高开发效率，方便重复使用，体现了高内聚低耦合） vue单页面的优缺点 优点： 数据驱动视图，对真实dom进行抽象出virtual dom（本质就是一个js对象），并配合diff算法，响应式和观察者、异步队列等手段以最小代价更新dom，渲染页面。 组件化，组件用单文件的形式进行代码的组织编写，使得
前端笔记-webpack中设置alias，方便import【vue cli】
IT1995的博客
10-01 5577
使用vue cli搞前端项目的使用，可以使用alias设置别名，方便import。 如下： 从这里可以看到，在alias中配置别名即可！ 调用如下： 如果不设置别名，会出现如下的问题： 这里要记住：要导入2个install npm install stylus --save npm install stylus-loader --save ...
VUE-webpack超详细教程
热门推荐
ICanWin_lll的博客
01-21 2万+
一.认识webpack 官网解释：从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具。 从模块化和打包两个角度来理解： 模块化： webpack其中一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系，而且不仅仅是JavaScript文件，CSS、图片、json文件等等在webpack中都可以被当做模块来使用 打包: 合并成一个或多个包(Bundle),并且在打包的过程中，还可以对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转
Vue Cli 3.0 配置webpack的别名alias
smildwind的博客
08-25 488
我们使用webpack的时候,一般配置alias 是在 webpack.config.js vue cli 2.0 里呢 是在 \build\webpack.base.conf.js 但是在 vue cli 3.0 里呢,这个配置一并放在了 vue.config.js 下面贴配置代码: vue.config.js const webpack = require("webpack"); const resolve = dir => require('path').join(__dirname, di
vue3从入门到精通
08-24
Vue 3 是一个流行的 JavaScript 框架，用于构建用户界面。它是 Vue.js 的最新版本，带来了许多新的特性和改进。 要从入门到精通 Vue 3，你可以按照以下步骤进行学习： 1. 了解基础概念：首先，你需要了解 Vue 3 的核心概念，如组件、指令、生命周期等。Vue 官方文档是一个很好的起点，你可以在官网上找到详细的文档和教程。 2. 安装 Vue 3：使用 npm 或 yarn 安装 Vue 3，并创建一个新的 Vue 3 项目。你可以使用 Vue CLI，这是一个官方提供的命令行工具，可以帮助你快速搭建 Vue 3 项目。 3. 学习基本语法：学习 Vue 3 的基本语法是入门的关键步骤。掌握如何创建组件、使用模板语法、定义数据和方法等。 4. 理解响应式数据：Vue 3 引入了一个全新的响应式系统，使用 `reactive` 函数来跟踪数据的变化。学习如何使用响应式数据，以及如何在组件中进行状态管理。 5. 掌握组件通信：理解 Vue 3 中组件之间的通信方式，包括 props、自定义事件、provide/inject 等。 6. 学习 Vue 3 的高级特性：学习 Vue 3 中的动态组件、插槽、异步组件等高级特性，可以让你更好地构建复杂的应用程序。 7. 探索 Vue 3 生态系统：Vue 3 生态系统提供了很多有用的库和工具，如 Vue Router、Vuex 等。了解并学习如何使用这些工具，可以帮助你更好地构建应用程序。 8. 实践项目：通过实际项目的练习，将所学的知识应用到实践中。尝试构建一个小型的 Vue 3 应用程序，以加深对 Vue 3 的理解和掌握。 总之，学习 Vue 3 需要持续的实践和不断地学习，通过阅读官方文档、参与社区讨论等方式，你可以逐渐提高自己的技能，并最终精通 Vue 3。祝你学习愉快！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值