vuex-demo v1.0.0

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

2. 在cmd 窗口 npm login

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

3. 创建自己的组件

 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('|') +
        ')\$'
        ),
        threshold: 10240,
        minRatio: 0.8
        })
        )
     }
     
    if (config.build.bundleAnalyzerReport) {
    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
    webpackConfig.plugins.push(new BundleAnalyzerPlugin())
    }

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

5. config/index.js

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

>6. 修改mian.js

>7. 删除.gitgnore  中
    /dist/