vue + iview后台实例问题总结 vue学习问题总结

// 记性真是不好上一次还知道怎么用,下一次就又忘了 现在放在这
export default {
    mounted: function () {
        particlesJS('particles-js', particles_config)
    },
    methods: {
    ...
    }

beforeRouteEnter(to, from, next) {
    next(vm => {
        // 通过 `vm` 访问组件实例
        vm.handleStart()
    });
},   methods: {
    handleStart() {
        var options = {
            color: '#FFF', //['#2d8cf0', '#19be6b', '#ff9900', '#ed3f14'],
            num: 100,
            range: 300,
            linewidth: 1,
            maxSpeed: 1,
            maxR: 5,
        }
        //这个就更奇葩了.因为是类 不是函数 结果必须在方法里靠点击才能运行 其他的一概不执行 而且他运行也不像文档里写的必须引入particles.js 也够怪的
        new Particleground.particle('#canvas', options);
        console.log("cccccccccccccc");
    }

    var options = {
    color: '#FFF', //['#2d8cf0', '#19be6b', '#ff9900', '#ed3f14'],
    num: 100,
    proximity:100,  //点点连线距离,只有两点小于这个距离才会连线,值太大的话连线会很密的
    range: 1300,    //点点连线的范围 值越大范围越大 太小的话即使达到距离 也有些点不连线
    linewidth: 1,
    maxSpeed: 1,
    maxR: 5,
    lineShape:'cube',
}

//这个效果和上面的 beforeRouteEnter(to, from, next) {} 是一直的 而且我这次升级了 Particleground
//现在叫JParticles 参数更多了一些
//呵呵 又发现个区别啊  document.ready 就不可以 只能用 window.onload
window.onload = function(){
    new JParticles.particle('#canvas', options);
}

// 路由配置
const RouterConfig = {
    mode: 'hash',   //哦 的确如此 必须用hash才能打包成静态页
    routes: Routers
};

const compiler = webpack(rendererConfig)

    //就到这里吧 热更新也做了 可惜就是不自动刷新浏览器
 //[WDS] App hot update... (执行到这里就不走了)
 //dev-server.js:45 [HMR] Checking for updates on the server... (就差这一句 不知道为啥)
 //这个写法真心没有命令行简单啊
 const server = new WebpackDevServer(
   compiler,
   {
     contentBase: path.join(__dirname, '../'),
     quiet: true,
     publicPath: '/dist/',
     hot: true,
     compress: true,
     historyApiFallback: true,
     setup(app, ctx) {
       app.use(hotMiddleware)
       ctx.middleware.waitUntilValid(() => {
         resolve()
       })
     }
   }
 )
 server.listen(8080)

output: {
    path: path.join(__dirname, './dist')
},
output: {
    publicPath: '',
    filename: '[name].[hash].js',
    chunkFilename: '[name].[hash].chunk.js'
},
    new HtmlWebpackPlugin({
        filename: 'index_prod.html',
        template: './src/template/index.ejs',
        inject: false
    })    

    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
        loaders: {
            css: ExtractTextPlugin.extract({
                use: ['css-loader', 'autoprefixer-loader'], //加这个 autoprefixer-loader 就报错  有个输出 以后再考虑吧 反正现在可以用了 就是不是最完美样子
                //use: ['css-loader'],
                fallback: 'vue-style-loader'
            })
        }
    }
},
      {
    test: /\.css$/,
    use: ExtractTextPlugin.extract({    //这里去除这个插件就会找不到带版本号的插件了
        use: ['css-loader?minimize', 'autoprefixer-loader'],  // 这个也是 这个autoprefixer-loader 好像是版本选择
        //use: ['css-loader?minimize'],  
        fallback: 'style-loader'
    })
},

app.get('/', function (req, res) {
 //res.send('Hello World')     //这里注意下因为生成的静态页不是index.html标准名称 所以不会显示
  res.sendFile( path.join(__dirname,  './dist/index_prod.html'))    //一定是绝对路径
})

var CopyWebpackPlugin = require('copy-webpack-plugin');
var path = require('path');

    plugins: [
        new CopyWebpackPlugin([{    //还有就是这个参数必须是数组才行,哪怕只有一个
            from:'./src/assets',
            to:'assets' //因为上面已经有了输出路径,所以不需要写两次了
        }]),
        ......
        ]

alias: {
            'vue': 'vue/dist/vue.esm.js'
        }

components:{
    //原本应该这么写  ff:require(['./aa.vue']) 就可以了 不知道这个 resolve 是哪里起的作用以后查查
    ff:(resolve) => require(['./aa.vue'], resolve)  //这么写组件就可以用了
}