各位老铁们，大家好，今天由我来为大家分享个人自媒体网站源码分享带后台，以及自媒体网站都有哪些的相关问题知识，希望对大家有所帮助。如果可以帮助到大家，还望关注收藏下本站，您的支持是我们最大的动力，谢谢大家了哈，下面我们开始吧！
创建工程目录ajax插件选择模拟ajax返回数据跨域问题优化webpack配置增加babel-polyfill增加路径别名修改单页面应用根模板index.html位置修改chunk文件名完善各种类型的css-loaderNEXT——路由篇源码本系列目录
创建工程目录
在开始一切的讲解前，我们先创建一个全新的工程。推荐直接使用vue官方提供的命令行工具vue-cli，它能快速的生成一个基于vue和webpack的单页面应用。
选择你的项目根文件夹\ncdvue-project\n\nvueinit[vue-cli模板名称][项目文件夹]\nvueinitwebpackmy-project\n\n安装babel-polyfill\nnpminstallbabel-polyfill–save\n\n#卸载babel-plugin-transform-runtime\nnpmuninstallbabel-plugin-transform-runtime–save\n1\n2\n3\n4\n5\n
修改文件.babelrc
“plugins”:[\n//”transform-runtime”\n],\n1\n2\n3\n
在入口文件main.js中引入babel-polyfill
import’babel-polyfill’\n1\n
增加路径别名
在实际开发中，某些路径层级可能会很深，如果使用相对路径可能会有无数的../../。为解决这种问题，我们可以增加路径别名，以减少开发过程中路径的复杂性。
修改文件：webpack.base.conf.js
resolve:{\nextensions:[‘.js’,’.vue’,’.json’],\nalias:{\n’vue$’:’vue/dist/vue.esm.js’,\n’@’:resolve(‘src’),\n’util’:’@/util’,\n’asset’:’@/asset’\n…\n}\n}\n1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n
修改单页面应用根模板index.html位置
webpack默认的根模板路径与src目录同级。但我更喜欢把根模板放置到src目录中。如果你也有像我这样的需求，那么按以下修改即可
//开发环境：webpack.dev.conf.js\nnewHtmlWebpackPlugin({\nfilename:’index.html’,\n//template:’index.html’,\ntemplate:’./src/index.html’,\ninject:true\n})\n\n//生产环境`webpack.prod.conf.js`\nnewHtmlWebpackPlugin({\nfilename:config.build.index,\n//template:’index.html’,\ntemplate:’./src/index.html’,\n…\n}),\n1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n11\n12\n13\n14\n15\n
修改chunk文件名
如果你不希望看到各种以数字开头的文件名的话，可以按照以下方式修改。如果你觉得hash太长，也可以限定其长度
//webpack.prod.conf.js\noutput:{\npath:config.build.assetsRoot,\nfilename:utils.assetsPath(‘js/[name].[chunkhash].js’),\n//chunkFilename:utils.assetsPath(‘js/[id].[chunkhash].js’)\nchunkFilename:utils.assetsPath(‘js/[name].[chunkhash:7].js’)\n}\n1\n2\n3\n4\n5\n6\n7\n
完善各种类型的css-loader
在build/utils.js中我们可以看到，vue-cli项目自动帮我们判断了需要哪些css的loader。如果你想以后不再轻易动package.json的话，你完全可以把这些loader都安装上。其中安装sass-loader前需要提前安装node-sass。安装less-loader前需要安装less。以下为安装sass-loader和less-loader
npminstallnode-sasssass-loaderlessless-loader–save-dev\n1\n
NEXT——路由篇
项目创建及配置完毕后，我们将开始编写后台管理系统中最重要也是最基础的部分——路由及其权限。基于权限的页面跳转将会是重中之重。
源码
当前源码地址：https://github.com/harsima/vue-backend
请注意，该源码会不断更新（因为工作很忙不能保证定期更新）
关于个人自媒体网站源码分享带后台到此分享完毕，希望能帮助到您。