抛开vue-cli，一步步搭建vue+webpack环境

杨肆月

发布于 2019-08-15 18:51:49

5590

发布于 2019-08-15 18:51:49

文章被收录于专栏：全栈开发之路

最终效果

So easy~Just do it!

前期准备工作

一、编辑器配置高亮

敲代码没有高亮简直蛋疼，简单带过下 sublime打开 —→ 点击Preferences下的Package Control —→ 输入install package回车过一会儿 —→ 再输入vue syntax highlight回车，安装完毕 —→ 点击sublime选择vue component，即高亮

二、webpack知多少

入门 Webpack，看这篇就够了极力推荐这篇，认真跟着此教程步骤过一遍，webpack能掌握个40%了。但是！由于依赖项更新，此教程中有很多错误，纠正如下：

1）使用webpack构建本地服务器

........（此处省略部分代码段）......
devServer: { 
        contentBase:"./public", 
        colors:true,  （误）—→ status: {colors:true} （正）
        historyApiFallback:true,
        inline: true
    } 
}

2）Loaders

........（此处省略部分代码段）......
module: {
        loaders: [ 
            { 
                test:/\.json$/,
                loader:"json"（误）—→ loader:"json-loader" （正）
            }    
        ]  
}

**凡是“loader:”后的字段都是xx-loader而不是xx **

3）CSS预处理器代码会报错，改成

{
    test: /\.css$/,
     use: [
        'style-loader',
        {
            loader: 'css-loader',
            options: {importLoaders: 1} //这里可以简单理解为，如果css文件中有import 进来的文件也进行处理
        },
        {
            loader: 'postcss-loader',
            options: {           // 如果没有options这个选项将会报错 No PostCSS Config found
                plugins: (loader) => [
                    require('autoprefixer')()//CSS浏览器兼容
                ]
            }
        }
    ]               
}

Let's Begin

一、新建目录

1、新建一个文件夹（被我命名为vue-webpack-test），在此目录下打开终端，输入npm init，目录下生成一个package.json

2、剩下文件自己新建，目录结构如下：

├── dist //
│   ├── bundle.js//打包后生成的
├── node_modules // npm包安装后生成的
├── src // 静态资源文件
│   ├── components //vue组件
│   │    └── nav.vue 
│   │    └── home.vue 
│   │    └── about.vue 
│   │    └── contact.vue 
│   ├── router//vue路由
│   │    └── index.js 
│   ├── App.vue 
│   └── main.js
├── index.html // 首页模板（得复制一份到dist文件夹里并引用bundle.js）
├── webpack.config.js // webpack配置文件
├── package.json // 包管理文件

二、安装依赖项

//vue相关
"vue": "^2.4.1",
 "vue-router": "^2.7.0",
 "vue-loader": "^13.0.1",
 "vue-template-compiler": "^2.4.1",

//webpack相关
"webpack": "^3.2.0",
"webpack-dev-server": "^2.5.1",

//babel相关（转换es6）
"babel-loader": "^7.1.1",
"babel-core": "^6.25.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1"

三、编写webpack配置文件

在写配置文件之前，我们先要考虑我们要利用这个打包工具完成哪些功能。 1、处理vue 2、处理es6 3、搭建测试服务器学完之前介绍的webpack教程，有很多代码可以用到这里。

//webpack.config.js
var webpack = require('webpack');
module.exports = {
    entry: __dirname + "/src/main.js",//入口文件
    output: {
        path: __dirname + "/dist",//打包后导出文件夹
        filename: "bundle.js"//导出的文件名
    },
    module: { 
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015','react']
                }
            }           
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.js'
        }
    },
    devServer: {
        contentBase: "./dist",
        stats:{colors: true},
        historyApiFallback: true,
        inline: true
    }
}

四、项目启动方式

修改package.json文件里的script字段

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

启动时，打开终端，键入npm start即可运行

五、分析vue组件及路由

1、vue组件

1）整个页面是个组件即App.vue 2）对于App.vue来说分为两大块组件：导航(nav.vue)和每个索引的具体内容 3）索引内容又细分为4个组件：home.vue、about.vue、contact.vue 源码如下：

\\App.vue
<template>
  <div id="app">
    <navbar></navbar>
    <router-view></router-view>
  </div>
</template>

<script>
import navbar from './components/nav.vue'
export default {
  name: 'app',
  components: {navbar}
}
</script>

\\nav.vue
<template>
    <ul>
        <li><router-link to="home">Home</router-link></li>
        <li><router-link to="about">About</router-link></li>
        <li><router-link to="contact">Contact me</router-link></li>
    </ul>
</template>
<script>
    export default {
        name: "navbar" //一定不要用nav
    }
</script>

\\home.vue
<template>
  <div>
      <h2>{{msg}}</h2>
      <p>
        Hello everyone!Welcome to my home.
      </p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
          msg: 'Home'
      }
    }
  }
</script>

\\about.vue
<template>
  <div>
    <h2>{{msg}}</h2>
    <p>
      Here's my infomation
    </p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
          msg: 'about'
      }
    }
  }
</script>

\\contact.vue
<template>
  <div>
    <h2>{{msg}}</h2>
    <p>
      Do you love me?Contact me hurry up!
    </p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
          msg: 'Contact Me'
      }
    }
  }
</script>

2、路由

路由很简单，一目了然，源代码如下

\\index.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

import Home from '../components/home.vue'
import About from '../components/about.vue'
import Contact from '../components/contact.vue'
let routers = [
    {
        path: '/home',
        name: 'home',
        component: Home
    },
    {
        path: '/about',
        name: 'about',
        component: About
    },
    {
        path: '/contact',
        name: 'contact',
        component: Contact
    },
    {
        path: '/',
        name: 'home',
        component: Home

    }
];

export default new Router({
  routes: routers
})

六、html文件

这个是个遗留问题。手动在dist里建一个index.html，引用最后打包的bundle.js，才能显示出来

\\index.html
<!DOCTYPE html>
<html>
  <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 type="text/javascript" src="bundle.js"></script>
  </body>
</html>

思考：怎么让html自动生成，并引用相应的js呢？

（2018.8.10更新下已解决这个问题）利用html-webpack-plugin

const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
    new HtmlWebpackPlugin({
        filename: 'index.html',
        template: 'index.html',
        inject: true//注入js
    })
],

具体可以参考这篇：https://www.jianshu.com/p/2b872ae3362d

七、编写入口文件

组件代码写好后，要将主组件App.vue注册到入口文件js里

\\main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
new Vue({
  el: '#app',
  router: router,
  template: '<App/>',
  components: { App }
})

再次npm start启动项目，即可完成最开始展示的效果。

报错解决

在做这个项目过程中，一些小问题会导致报错，我把我所遇到的错误罗列如下，希望能解决你的问题。

报错一

//webpack.config.js漏了
resolve: {
        alias: {
            'vue': 'vue/dist/vue.js'
        }
    }

报错二

component名称不能与 HTML 元素或者 Vue 保留标签重名，不区分大小写。可以发现，只检查了常用的 HTML 元素，还有很多元素没有检查，例如 button、main。所以nav.vue的名称不能使nav，改成navbar。

报错三

路由文件index.js里每个组件的components不能用{}

如果还有什么疑问，请clone项目自己看看

github地址：https://github.com/Yapril/vue-nocli.git

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2017.07.19 ，如有侵权请联系 cloudcommunity@tencent.com 删除

webpack

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度