抛开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



\\nav.vue


\\home.vue



\\about.vue



\\contact.vue



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


  
    
    
    
  
  
    

思考:怎么让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: '',
  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

你可能感兴趣的:(抛开vue-cli,一步步搭建vue+webpack环境)