我们在使用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');
const HtmlWebpackPlugin=require('html-webpack-plugin');
const VueLoaderPlugin=require('vue-loader/lib/plugin');
module.exports={
mode:'production',
output:{
path:path.resolve(__dirname,'./../dist'),
filename:'bundle.min.js'
},
plugins:[
new HtmlWebpackPlugin({
template:'index.html'
}),
new VueLoaderPlugin()
]
}

总的配置文件

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

简单的配置就已经搞定啦,你学会了吗

手把手教你使用webpack搭建vue框架的更多相关文章

  1. 手把手教你用vue-cli搭建vue项目

    手把手教你用vue-cli搭建vue项目 本篇主要是利用vue-cli来搭建vue项目,其中前提是node和npm已经安装好,文章结尾将会简单提到一个简单的例子.使用vue-cli搭建项目最开始我也是 ...

  2. 每天记录一点:NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发

    每天记录一点:NetCore获得配置文件 appsettings.json   用NetCore做项目如果用EF  ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...

  3. 手把手教你用Python搭建自己的量化回测框架【均值回归策略】

    手把手教你用Python搭建自己的量化回测框架[均值回归策略] 引言 大部分量化策略都可以归类为均值回归与动量策略.事实上,只有当股票价格是均值回归或趋势的,交易策略才能盈利.否则,价格是随机游走的, ...

  4. 手把手教你使用 VuePress 搭建个人博客

    手把手教你使用 VuePress 搭建个人博客 有阅读障碍的同学,可以跳过第一至四节,下载我写好的工具包: git clone https://github.com/zhangyunchencc/vu ...

  5. 手把手教你用webpack3搭建react项目(开发环境和生产环境)(一)

    开发环境和生产环境整个配置源码在github上,源码地址:github-webpack-react 如果觉得有帮助,点个Star谢谢!! (一)是开发环境,(二)是生产环境. 一.首先创建packag ...

  6. SpringCloud学习之手把手教你用IDEA搭建入门项目(三)

    本篇博客是承接上一篇<手把手教你用IDEA搭建SpringCloud入门项目(二)>,不清楚的请到我的博客空间查看后再看本篇博客,上面两篇博客成功创建了一个简单的SpringCloud项目 ...

  7. SpringCloud学习之手把手教你用IDEA搭建入门项目(一)

    SpringCloud简单搭建 jdk:1.8开发工具:IDEA注:需要了解springcloud 1.创建最简单的Maven项目 1)开始创建一个新的项目 ​ 2)创建一个空模板的maven项目,用 ...

  8. 30分钟手把手教你学webpack实战

    30分钟手把手教你学webpack实战 阅读目录 一:什么是webpack? 他有什么优点? 二:如何安装和配置 三:理解webpack加载器 四:理解less-loader加载器的使用 五:理解ba ...

  9. 手把手教你认识并搭建Nginx

    手把手教你认识并搭建Nginx Nginx (“engine x”) 是一个高性能的 HTTP 和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器. Nginx 是由 Igor ...

随机推荐

  1. 团队作业5-Alpha版本测试报告

    1.在测试过程中总共发现了多少Bug?每个类别的Bug分别为多少个? 修复的Bug: a. 修复的bug: 页面打开后比例改变: 出现中文乱码: 点击按钮时不能响应: 导航栏加入显示错误: 上传图片后 ...

  2. AngularJs 学习 (二)

    紧接着第一部分: 推荐阅读: http://adrianmejia.com/blog/2014/10/03/mean-stack-tutorial-mongodb-expressjs-angularj ...

  3. 初识nginx——配置解析篇

    一.nginx的介绍 nginx是由俄罗斯人开发的一款高性能的http和反向代理服务器,也可以用来作为邮件代理.相比较于其他的服务器,具有占用内存少,稳定性高等优势 二.nginx的配置 nginx的 ...

  4. Rsyslog日志服务搭建

    rsyslog是比syslog功能更强大的日志记录系统,可以将日志输出到文件,数据库和其它程序.Centos 6.x默认的rsyslog版本是5.x. 网上关于rsyslog的安装配置文档倒是不少,但 ...

  5. Prism框架的优点

    以我粗略的了解,prism/mvvm可以做到完全的逻辑和ui分离.即便是事件都是如此.这是主要优点.mvc是从本质上ui框架(当前大量半吊子把业务逻辑写在里面是不对的),mvvm包含客户端的业务逻辑. ...

  6. 将utf-8的中文或者字符都看成一个字符

    function utf8_strlen($string=null){ // 将字符串分解为单元 preg_match_all("/./us", $string, $match); ...

  7. linux 无交互生成ssh rsa免秘证书

    [root@xxx tmp]# man ssh-keygen NAME ssh-keygen - authentication key generation, management and conve ...

  8. linux使用密文生成os账户

    1.生成账户 [hufangrui@xxx ~]$ openssl passwd -1Password: Verifying - Password: $1$szzkROBZ$GYxffRLp8K5vW ...

  9. Nmap用法实例

    <给Linux系统/网络管理员的nmap的29个实用例子> https://linux.cn/article-2561-1.html

  10. 在Asp.Net Core中使用Session

    1.在Stratup.cs中配置Session public void ConfigureServices(IServiceCollection services) { services.AddSes ...