美文网首页
05_02.脚手架搭建

05_02.脚手架搭建

作者: Robyn_Luo | 来源:发表于2017-11-18 21:13 被阅读0次
1. 要操作的列表
2. 代码
  • src/component/home/home.vue
<template>
    <section>首页</section>
</template>

<script>
</script>

<style>
</style>
  • src/component/news/news.vue
<template>
  <section @click="clickHanler">新闻</section>
</template>

<script>
// 这里面写的是该组件的配置
export default {

    // 数据写到这里
    data() {
        return {};
    },

    // 方法写在这里
    methods: {
        clickHanler() {
            console.log('新闻被点击了')
        }
    }
}
</script>

<style>
</style>
  • src/component/photo/photo.vue
<template>
    <section>图片</section>
</template>

<script>
</script>

<style>
</style>
  • src/component/App.vue
<template>
  <main>
      <p>{{ msg }}</p>
      <router-view></router-view>
  </main>
</template>

<script>
// 这里vue要求我们对外暴漏一个组件的配置项
// 这里因为template已经在上面独立编写了,vue-loader到时候会帮我们处理,所以配置项中就不用写template了
export default {
    data() {
        return {
            msg: '测试vue文件是否可用'
        }
    }
}
</script>

<style scoped>
p {
    font-size: 30px;
    color: red;
}
</style>

  • src/js/main.js
// 要把组件渲染到页面中, 我们就必须要导入Vue这个库, 然后才可以new他
// es6语法导入的Vue与我们在浏览器中使用的Vue有点小区别, 失去了浏览器模版编译功能,
// 失去该功能的原因是, 你使用es6语法, vue知道你一定使用了构建工具, 那么使用构建工具,
// 你应该会使用vue-loader, 使用了vue-loader他会在本地打包时把模版编译好, 
// 然后在浏览器中直接使用编译好的模版, 相比咱们以往的方式性能会有提升.

// 导入第三包
import Vue from 'vue';
import VueRouter from 'vue-router';

// 手动启用Vue插件, 在以前VueRouter插件会自动调用use, 
// 但是我们使用了模块化之后, window下没有Vue全局变量, 插件就无法自调use了
Vue.use(VueRouter);

// 导入我们编写的组件
import App from '../component/App.vue';
import Home from '../component/home/home.vue';
import News from '../component/news/news.vue';
import Photo from '../component/photo/photo.vue';

new Vue({
    el: '#app',
    // 以前这里写的是template与methods等等东西,
    // 现在这些代码都统一放在了App.vue里面来写, 
    // App.vue就是咱们项目的根组件
    render(c) {
        return c(App);
    },
    // 路由配置
    router: new VueRouter({
        routes: [
            { path: '/', component: Home },
            { path: '/news', component: News },
            { path: '/photo', component: Photo }
        ]
    })
});

  • src/.babelrc
{
    "presets": [ "env" ],
    "plugins":["transform-runtime"]
}

  • src/webpack.config.js
const path = require('path');
const HtmlWP = require('html-webpack-plugin');
const CleanWP = require('clean-webpack-plugin');

module.exports = {
    // 打包的入口文件
    entry: path.resolve(__dirname, './src/js/main.js'),
    // 输出
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.js'
    },
    // 插件配置
    plugins: [
        new HtmlWP({
            template: './src/index.html',
            filename: 'index.html',
            inject: 'body'
        }),
        new CleanWP(['dist'])
    ],
    // 模块配置
    module: {

        // 配置loader规则
        rules: [

            // css
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            },

            // less
            {
                test: /\.less$/,
                use: [ 'style-loader', 'css-loader', 'less-loader' ]
            },

            // html
            {
                test: /\.(html|tpl)$/,
                use: [ 'html-loader' ]
            },

            // 静态资源引用
            {
                test: /\.(png|jpeg|gif|jpg|svg|mp3)$/,
                use: [ 
                    { loader: 'url-loader', options: { limit: 10240 } } // 小于10KB的打包
                ]
            },

            // js
            {
                test: /\.js$/,
                use: [ 'babel-loader' ],
                exclude: path.resolve(__dirname, 'node_modules')
            },

            // vue
            {
                test: /\.vue$/,
                use: [ 'vue-loader' ]
            }

        ]
    }
};

  • src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>
  • 根目录执行webpack-dev-server

webpack-dev-server

相关文章

网友评论

      本文标题:05_02.脚手架搭建

      本文链接:https://www.haomeiwen.com/subject/aprevxtx.html