专栏首页全栈开发之路抛开vue-cli,一步步搭建vue+webpack环境

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

最终效果

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 抛开vue-cli,一步步搭建vue+webpack环境(迁移到webpack4)

    抛开vue-cli,一步步搭建vue+webpack环境 https://www.jianshu.com/p/e735e67de774 这是之前写的,当时用...

    杨肆月
  • css/style/sass-loader区别

    The css-loader interprets @import and url() like import/require() and will resol...

    杨肆月
  • JS调用栈/回调队列/事件循环

    单线程容易遇到一个问题:阻塞 解决办法:异步回调 解决原理:调用栈把会阻塞的函数丢到Web APIs里,Web APIs再把它丢到回调队列里, 通过事件循...

    杨肆月
  • 17、webpack从0到1-构建vue项目

    Ewall
  • webpack+vue项目实战(一,搭建运行环境和相关配置)

    现在正在开发一个公司的后台管理项目,项目是一个单页面应用。功能上就是管理销售订单的各个环节,包括物流管理,回款管理,订单管理等等的功能。这些就不多说了。项目是,...

    守候i
  • vue.js学习(02)

    今天将vue.js官网的所有看完了,一共15个视频,看完也就差不多一个小时,便将所有vue.js的基本用法都看完了。基本可以满足基础知识的学习。

    efonfighting
  • vue工具 - vue/cli@3.xx 安装使用流程

    xing.org1^
  • Vue Cli3使用

    Vue CLI 3 和旧版使用了相同的 vue 命令,所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能...

    剑行者
  • 架构图以及vue的简介

    MVVM 由 Model,View,ViewModel 三部分构成,Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;View 代表...

    Dawnzhang
  • Rollup构建发布一个Vue组件

    在项目目录下面创建 src 目录并添加 index.js 文件和 vue-component.vue

    前端黑板报

扫码关注云+社区

领取腾讯云代金券