Open jackieli123723 opened 6 years ago
"dependencies": { "vue": "^2.5.7", "vue-router": "^3.0.1", "vuex": "^3.0.1", "vue-lazyload": "^1.1.4", "vuex-router-sync": "^5.0.0", "axios": "^0.17.1", "element-ui": "^2.0.5", "echarts": "^3.8.5" }, "devDependencies": { "autoprefixer": "^7.1.2", "babel-core": "^6.22.1", "babel-eslint": "^8.0.2", "babel-loader": "^7.1.1", "babel-plugin-istanbul": "^4.1.1", "babel-plugin-transform-runtime": "^6.22.0", "babel-preset-env": "^1.3.2", "babel-preset-stage-2": "^6.22.0", "babel-register": "^6.22.0", "chai": "^4.1.2", "chalk": "^2.0.1", "chromedriver": "^2.27.2", "connect-history-api-fallback": "^1.3.0", "copy-webpack-plugin": "^4.2.1", "cross-env": "^5.0.1", "cross-spawn": "^5.0.1", "css-loader": "^0.28.7", "eslint": "^4.11.0", "eslint-config-standard": "^10.2.1", "eslint-friendly-formatter": "^3.0.0", "eslint-loader": "^1.7.1", "eslint-plugin-html": "^4.0.0", "eslint-plugin-import": "^2.7.0", "eslint-plugin-node": "^5.2.0", "eslint-plugin-promise": "^3.4.0", "eslint-plugin-standard": "^3.0.1", "eventsource-polyfill": "^0.9.6", "express": "^4.14.1", "extract-text-webpack-plugin": "^3.0.0", "file-loader": "^1.1.4", "friendly-errors-webpack-plugin": "^1.6.1", "html-webpack-plugin": "^2.30.1", "http-proxy-middleware": "^0.17.3", "inject-loader": "^3.0.0", "karma": "^1.4.1", "karma-coverage": "^1.1.1", "karma-mocha": "^1.3.0", "karma-phantomjs-launcher": "^1.0.2", "karma-phantomjs-shim": "^1.4.0", "karma-sinon-chai": "^1.3.1", "karma-sourcemap-loader": "^0.3.7", "karma-spec-reporter": "0.0.31", "karma-webpack": "^2.0.2", "less": "^2.7.3", "less-loader": "^4.0.5", "mocha": "^3.2.0", "nightwatch": "^0.9.12", "nyan-progress-webpack-plugin": "^1.2.0", "opn": "^5.1.0", "optimize-css-assets-webpack-plugin": "^3.2.0", "ora": "^1.2.0", "phantomjs-prebuilt": "^2.1.14", "portfinder": "^1.0.13", "rimraf": "^2.6.0", "selenium-server": "^3.0.1", "semver": "^5.3.0", "shelljs": "^0.7.6", "sinon": "^4.0.0", "sinon-chai": "^2.8.0", "style-loader": "^0.19.0", "url-loader": "^0.6.2", "vue-loader": "^13.3.0", "vue-style-loader": "^3.0.1", "vue-template-compiler": "^2.5.7", "webpack": "^3.8.1", "webpack-bundle-analyzer": "^2.9.0", "webpack-dev-middleware": "^1.12.0", "webpack-hot-middleware": "^2.18.2", "webpack-merge": "^4.1.0" }
检查下你的列表组件里，slot 里的 <template> 上面有个 scope 属性，你改成 slot-scope <template scope="xxx">yyyyyyyy</template> 改成 <template slot-scope="xxx">yyyyyyyy</template> scope 属性在2.5以后的版本中已经废弃， 被 slot-scope 替代 slot-scope 不光可以用在 template 元素上，也可以用在其它元素
//.element-ui1.x // import 'element-ui/lib/theme-default/index.css' // 改为 //.element-ui2.x // import 'element-ui/lib/theme-chalk/index.css';
resolve: { /** * Vue v2.x之后NPM Package默认设置只会生成runtime-only 版本，若要使用standalone功能則需如下设置 * 否则会报错：Failed to mount component: template or render function not defined. */ alias: { vue: 'vue/dist/vue.js' }, extensions: ['', '.js', '.vue'] } webpack.config.js完整代码如下： var webpack = require('webpack') module.exports = { entry: './src/main.js', output: { path: './dist', publicPath: 'dist/', filename: 'build.js' }, module: { loaders: [ { test: /\.vue$/, loader: 'vue' }, { test: /\.js$/, loader: 'babel', exclude: /node_modules/ }, { // edit this for additional asset file types test: /\.(png|jpg|gif)$/, loader: 'file?name=[name].[ext]?[hash]' } ] }, // example: if you wish to apply custom babel options // instead of using vue-loader's default: babel: { presets: ['es2015', 'stage-0'], plugins: ['transform-runtime'] }, resolve: { /** * Vue v2.x之后NPM Package默认设置只会生成runtime-only 版本，若要使用standalone功能則需如下设置 * 否则会报错：Failed to mount component: template or render function not defined. */ alias: { vue: 'vue/dist/vue.js' }, extensions: ['', '.js', '.vue'] } } 今日亲测,需要加入: alias: { vue:vue/dist/vue.min.js; #}, 对应的main.js // new Vue({ // router, // store, // render: h => h(App) // }).$mount('#app'); 但是会造成npm run dev 无法打开devTool调试工具造成生产环境的假象 正确的如下 //app.vue <template> <div id="app"> <router-view></router-view> </div> </template> <script> export default{ name: 'APP' } </script> //main.js new Vue({ el: '#app', router, store, template: '<App/>', components: { App } }) //webpack.base.config.js resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src') } },
<script> -- | if (!window.Promise) { | document.write('<script src="//shadow.elemecdn.com/npm/es6-promise@4.1.1/dist/es6-promise.min.js"><\/script><script>ES6Promise.polyfill()<\/script>') | } | </script>
var fs = require('fs'); var watch = require('node-watch'); fs.readdir('../mock', function (err, files) { if (err) throw err; files.forEach( function (file) { fs.stat('../mock/'+file,function(err,stats) { if (err) throw err; if (stats.isDirectory()) { console.log("%s is a directory", file); // fs.watch('./'+file, function (event, filename) { watch('./'+file, { recursive: true }, function(evt, filename) { var json=getJson() fs.writeFile('db.json', json,"utf-8", (err) => { if (err) throw err; console.log('It\'s saved!'); }); }); } }) }) }) function getJson(){ Object.keys(require.cache).forEach((key)=>{ delete require.cache[key] }) var json = require('./mock.js') json=JSON.stringify(json, null, 2) return json } //windows node 6.x 才能把cache 删除 //mac 没node版本限制 //bug 修复（require.cache)导致）
//table <el-table :data="tableDataUserList" v-if="totalPages >= 0 " style="width: 100%"> //分页 <div class="user-page" v-show="totalPages > 0"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[10, 20, 30, 50]" :page-size="100" layout="total, sizes, pager, prev,next,jumper" :total="totalPages"> </el-pagination> </div> //用totalPages 为-1 来作为判断 //tableDataUserList 初始化为空数组 //该方法做保险最优推荐 data() { return { totalPages:-1, tableDataUserList:[], } },
1.vue配套"vue": "^2.5.7", "vue-template-compiler": "^2.5.7"
下面是自己匹配的自由组合
2.vue-slot切换 since 2.5.x后语法糖改变
3.element-ui1.x--2.x的css引用
4.Vue2+Webpack报错：Failed to mount component: template or render function not defined.
promsie
mock.js
element2.0.5 table ：data 暂无数据bug 处理（有数据先出现暂无数据在渲染）