手把手教你使用webpack搭建vue框架
我们在使用vue开发项目的时候,都是用vue-cli直接来搭建的.但是这是别人已经造好的*,我们既然要使用别人造好的*,我们总不能知其然而不知其所以然.所以呢,我这边文章就教你如何使用webpack一步一步搭建起vue-cli框架,
首先,第一步呢,肯定是要安装webpack啦
安装webpack
使用webpack的命令的话,一定要全局安装一下webpack
npm install --global webpack
初始化项目
cnpm init
说明:
安装中-d和-s的区别
-d,安装包会在package中的 devdependencies对象中。简称dev。dev是在开发环境中要用到的。
-s后,安装包会在package中的 dependencies 对象中。简称dep。dep是在生产环境中要用到的。
本地安装
cnpm i webpack webpack -d
安装好之后呢,我们需要构建webpack的配置文件,因为我们平时开发的时候,需要考虑到生产环境和开发环境,不同的环境的话,部分配置是不一样的
目录结构
webpack-vue
|- package.json
|-config
|-webpack-development.js
|-webpack.production.js
|-src
|-app.vue
|-components
|-router
|-index.js
|-main.js
|-webpack.config.js
|-index.html
编写配置文件
在编写配置文件之前,我们肯定得要安装各种模块的啦
资源管理类的loader
cnpm i css-loader file-loader url-loader html-webpack-plugin less less-loader babel-loader @babel/core @babel/preset-env vue-loader vue-style-loader vue-template-compiler -d
* vue-loader :处理.vue文件
* vue-style-loader:处理.vue里面的样式
* vue-template-compiler:编译.vue中template里面的内容
安装vue-router等
cnpm i vue-router axios vue-axios -s
在config文件下面创建webpack-development.js和webpack.production.js两个文件
webpack-development.js----->开发环境
const htmlwebpackplugin=require('html-webpack-plugin');
// vue-loader15.*之后的版本都必须要加上这个,否则会报错 const vueloaderplugin=require('vue-loader/lib/plugin'); module.exports={ mode:'development', output:{ filename:'bundle.js' }, devtool:'source-map', plugins:[ new htmlwebpackplugin({ template:'index.html' }), new vueloaderplugin() ] }
webpack.production.js
总的配置文件
const path = require('path'); module.exports = function (env, argv) {
// env其实是在package中运行的命令是配置了 env = env || {}; return { entry: './src/main.js', module: { rules: [ // 处理css { test: /\.css$/i, use: ['vue-style-loader', 'css-loader'] }, // 处理vue { test: /\.vue$/i, use: 'vue-loader' }, // 处理less { test: /\.less$/i, use: ['vue-style-loader', 'css-loader', 'less-loader'] }, // 小图片转为base64 { test: /\.(png|jpg|gif)$/i, use: [{ loader: 'url-loader', options: { limit: 8192 } }] }, // 处理es6 { test: /\.(js|jsx)$/i, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } }, // 多媒体文件 { test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, } }, // 处理字体 { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, } } ] }, resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue': 'vue/dist/vue.esm', '@': path.resolve(__dirname, 'src/components') } }, ...env.development ? require('./config/webpack-development') : require('./config/webpack.production') } }
配置文件这一块我们就已经搞定啦,开始捣鼓vue部分了
在src里面创建main.js作为主的js文件,也是入口文件
import vue from 'vue'; import router from './routers/' import app from './app' import axios from 'axios'; import vueaxios from 'vue-axios'; vue.use(vueaxios,axios) let vm=new vue({ el:'#app', components:{ app }, router, template:` <app/> ` })
app.vue
<template lang='html'> <div> <router-link :to="{ name: 'index', params: {} }">首页</router-link> <router-link :to="{ name: 'news', params: {} }">新闻</router-link> <router-view/> </div> </template> <script> export default { name:'app', data(){ return{ msg:'hello world' } }, components:{ } } </script> <style lang="less" scoped> </style>
既然都用到了路由,那么我们项目中肯定是要对路由进行处理,建一个router文件夹,里面创建index.js
import vue from 'vue'; import router from 'vue-router'; import index from '@/index'; import news from '@/news'; vue.use(router); export default new router({ routes: [ { path:'/', name:'index', component:index },{ path:'/news', name:'news', component:news } ] })
说明:引入的话,不用我说明,已经在main.js中引入了
到这项目就已经基本搭好了,但是需要运行起来的话,我们还需要在package里面配置一下
"scripts": { "test": "echo \"error: no test specified\" && exit 1", "start": "webpack-dev-server --env.development --hot --port 8089 --open ", "build": "webpack --env.production" },
* --hot:热更新
* --port:修改端口
* --open:自动在浏览器打开运行项目
启动服务用的是webpack-dev-server,在最初配置文件中的env也是来自于这边的命令,
// 开发环境 cnpm run start // 生产环境 cnpm run build
简单的配置就已经搞定啦,你学会了吗
上一篇: 纯净燕窝怎么样?它的品质很不错哟
下一篇: 甜的我确实舍不得卖
推荐阅读
-
从零开始搭建前后端分离的NetCore2.2(EF Core CodeFirst+Autofac)+Vue的项目框架之七使用JWT生成Token(个人见解)
-
从零开始搭建前后端分离的NetCore2.2(EF Core CodeFirst+Autofac)+Vue的项目框架之十一Swagger使用一
-
使用webpack搭建vue环境
-
使用vue-cli webpack 快速搭建项目的代码
-
使用webpack搭建vue环境
-
使用vue-cli+webpack搭建VUE开发环境
-
vue 系列——vue2-webpack2框架搭建踩坑之路
-
使用vue-cli+webpack搭建vue开发环境的方法
-
用Python手把手教你搭建一个web框架-flask微框架!
-
使用webpack搭建vue项目实现脚手架功能