vuex-demo

vuex-demo

A Vue.js project

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For a detailed explanation on how things work, check out the guide and docs for vue-loader.

Vuex

    1. 什么情况下使用vuex
        虽然vuex 可以帮助我们管理共享状态，但也附带了更多概念和框架，这需要对短期和长期效益进行权衡
        如果你不打算开发大型单页面应用，使用vuex 可能是繁琐冗余的，
    2. vux 状态管理
        view -> (dispatch)Action ->(Commit) Mutations ->(Mutate) State -> View
        注意： Action 不是必须品，如果有异步操作才可能用到Action，否则可以不使用Action
    3. Actions:
        Action 提交的是Mutation ,而不是直接更改状态
        Action 可以包含任意异步操作
    4. 提取Stroe 为公共代码
       在src 创建stroe 文件夹
       同router 提取一样

Npm 包的发布

1. 在官网注册账号 https://www.npmjs.com

1. 在cmd 窗口 npm login

    Username: yinxiulong
    Password:
    Email: (this IS public) yinxiulong@aliyun.com
    Logged in as yinxiulong on https://registry.npmjs.org/.
    表示登录成功！

1. 创建自己的组件

 1.初始化项目
       2.修改package.json
          private : true ->false
         "main": "dist/vue-vuex.min.js ", // main表示入口  vuex打包后的名字
       3.删除webpack.prod.config.js 不需要的代码块
 
         ,
        // generate dist index.html with correct asset hash for caching.
        // you can customize output by editing /index.html
        // see https://github.com/ampedandwired/html-webpack-plugin
        new HtmlWebpackPlugin({
        filename: config.build.index,
        template: 'index.html',
        inject: true,
        minify: {
            removeComments: true,
            collapseWhitespace: true,
            removeAttributeQuotes: true
            // more options:
            // https://github.com/kangax/html-minifier#options-quick-reference
        },
        // necessary to consistently work with multiple chunks via CommonsChunkPlugin
        chunksSortMode: 'dependency'
        }),
         // keep module.id stable when vendor modules does not change
        new webpack.HashedModuleIdsPlugin(),
        // enable scope hoisting
        new webpack.optimize.ModuleConcatenationPlugin(),
        // split vendor js into its own file
        new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        minChunks (module) {
            // any required modules inside node_modules are extracted to vendor
            return (
            module.resource &&
            /\.js$/.test(module.resource) &&
            module.resource.indexOf(
                path.join(__dirname, '../node_modules')
            ) === 0
            )
        }
        }),
        // extract webpack runtime and module manifest to its own file in order to
        // prevent vendor hash from being updated whenever app bundle is updated
        new webpack.optimize.CommonsChunkPlugin({
        name: 'manifest',
        minChunks: Infinity
        }),
        // This instance extracts shared chunks from code splitted chunks and bundles them
        // in a separate chunk, similar to the vendor chunk
        // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
        new webpack.optimize.CommonsChunkPlugin({
        name: 'app',
        async: 'vendor-async',
        children: true,
        minChunks: 3
        }),

        // copy custom static assets
        new CopyWebpackPlugin([
        {
            from: path.resolve(__dirname, '../static'),
            to: config.build.assetsSubDirectory,
            ignore: ['.*']
        }
        ])
        if (config.build.productionGzip) {

            const CompressionWebpackPlugin = require('compression-webpack-plugin')

            webpackConfig.plugins.push(
            new CompressionWebpackPlugin({
            asset: '[path].gz[query]',
            algorithm: 'gzip',
            test: new RegExp(
            '\\.(' +
            config.build.productionGzipExtensions.join('|') +
            ')\

修改默认的


            // 修改路径
            output:{
                path:config.build.assetsRoot,
                publicPath:config.build.assetsPublicPath,
                filename:'vue-vuex.min.js',
                library:'VueCounter',
                libraryTarget:'umd'
            },

config/index.js


          修改     
          assetsSubDirectory: 'static'  -->    assetsSubDirectory: '/',


修改mian.js



删除.gitgnore  中
 /dist/



            ),
            threshold: 10240,
            minRatio: 0.8
            })
            )
         }
         
        if (config.build.bundleAnalyzerReport) {
        const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
        webpackConfig.plugins.push(new BundleAnalyzerPlugin())
        }

1. 修改默认的

__CODE_BLOCK_4__

1. config/index.js

__CODE_BLOCK_5__

1. 修改mian.js

1. 删除.gitgnore 中 /dist/