创建项目目录ajax插件选择模拟ajax返回数据跨域问题，优化webpack配置，增加babel-polyfill，增加路径别名，修改单页应用根模板index.html位置，修改chunk文件名，完善各类CSS-loadernex ——路由源代码。在本系列中创建一个项目目录。在开始一切之前，让我们创建一个全新的项目。推荐直接使用vue提供的命令行工具vue-CLI，可以快速生成一个基于vue和webpack的单页应用。
#全局安装vue-clinpm安装vue-cli -g#选择您的项目根文件夹# e:# cd vue-project#创建webpack项目# vue init [vue-cli模板名][项目文件夹]vue init webpack my-project#安装依赖于npm安装12345678910111213。安装中有自动提示，要求输入项目名称、描述、作者、关键字、是否使用eslint、是否加入单元测试。如有需求，可直接输入或根据提示选择。如果没有需求，就一直按Enter和Y。
完成以上步骤后，可以在e:\vue-project\my-project中找到自动生成的项目。然后可以根据实际需要或者书写习惯创建具体的目录。以下是参考目录：
|-src/|-资产//静态文件目录：css、图片等| |-组件//组件文件目录| |-页面//具体业务页面目录| |-路由器//vue-路由器的路由目录||-store//vuex目录|| -util///工具类目录|- main.js //webpack入口文件|- App.vue //入口页面123456789ajax插件选择在jQuery时代，ajax一般是jQuery自己直接使用的。但是，当vue作为底层开发框架时，jQuery本身很少被提及，因为它很少直接操作dom。所以推荐你使用axios作为ajax插件，这也是vue官方推荐的插件。Axios易于安装和使用，但其在项目中的具体配置会在以后的章节中涉及，这里就不详细讨论了。现在我们只需要知道它可以实现ajax。
模拟ajax返回数据。在实际开发过程中，经常会遇到前端需要后端的数据，而后端不完成这个功能的情况。这个问题有很多解决方案，比如为前端和后端设置一个公共的模拟服务器。但是如果项目前期没有充分的准备，前端同学用Mockjs实现这个需求更方便快捷，而且和项目本身是一体的，不需要搭建服务器。
注意：Mockjs在本地项目中的集成应该只在开发的早期或者工作比较忙的时候使用。后期还是应该有一个统一的API测试平台，保证前后台可以通过这个平台测试自己的功能，API协议可以统一管理。
跨域问题如果ajax请求地址在开发过程中与本服务的同一主机和端口不同，由于浏览器自身的安全机制会出现跨域问题。解决这个问题最好的办法就是让后台同学配置CORS，或者在webpack中设置proxyTable，或者设置nginx服务进行反向代理。
这里主要说一下webpack中proxyTable的设置(其实就是vue-cli生成的项目自带的配置项)。请注意，webpack的proxyTable只在开发环境中有效！以下描述均引自vue-cli对webpack模板的描述。这是原文的链接：vuejs-templates
编辑config/index.js中的dev.proxyTable项以设置代理规则。在开发环境中，实际使用的是http-proxy-middleware插件实现的代理功能，详细用法你可以参考其官方文档。这里有一个简单的例子：
//config/index . js module . exports={//.dev 3360 { proxy table 3360 {//所有以/api为前缀的请求都将被代理到http://jsonplaceholder.typicode.com//i.e./API/getNav-http://jsonplaceholder.typicode.com/getNav ‘/API ‘ : { target : ‘ http://jsonplaceholder . typicode . com ‘，changeOrigin: true，path rewrite : { ‘/API ‘ 3360 ‘ ‘ } } } 123456789101121314151617优化webpack配置这里只是针对项目的全局修改，实际开发中可能会有更多的修改，比如添加loader等。
添加巴别塔多聚填料
vue-cli默认生成的项目自带babel-plugin-transform-runtime，保证了一定的浏览器兼容性。但是有两个问题：
异步加载组件时，会出现多填充代码冗余。不支持全局函数和实例方法的多填充。以上有两个缺点。我们需要添加babel-polyfill，删除babel-plugin-transform-runtime。在命令行中输入以下命令
#安装Babel-polyfillnpm安装Babel-polyfill-save #卸载Babel-plugin-transform-runtime NPM卸载Babel-plugin-transform-runtime-save 12345修改文件。巴伯尔克
\ ‘ plugins \ ‘ 3360[/\ ‘ transform-runtime \ ‘]，123在导入文件main.js中引入babel-polyfill
导入“babel-multi fill”1添加一个路径别名。
在实际开发中，有些路径层次可能很深，如果使用相对路径，可能有无数个././.为了解决这个问题，我们可以在开发过程中添加路径别名来降低路径的复杂度。
修改文件：webpack.base.conf.js
resolve: { extensions: [‘。js ‘，’。vue ‘，’。json’]，alias : { ‘ vue $ ‘ : ‘ vue/dist/vue . ESM . js ‘，’ @’: resolve(‘src ‘)，Util’ 3360′ @/util ‘，’ asset’ 3360′ @/asset ‘.}} 12345678910修改单页面应用的根模板的index.html位置
PACK的默认根模板路径与src目录在同一级别。但是我更喜欢把根模板放在src目录中。如果你有和我一样的需求，请点击下面的修改。
//开发环境：web pack . dev . conf . js new HTMLWebPackPlugin({ filename 3360 ‘ index . html ‘，//template3360’ index.html ‘，template3360 ‘)。/src/index.html ‘，Inject: true})//生产环境` web pack . prod . conf . js ` new htmlwebpackplugin({ filename 3360 config . build . index，//template3360’ index.html ‘，template3360 ‘。/src/index.html ‘，})，123456789101112131415修改组块文件名
如果不想看到各种以数字开头的文件名，可以修改如下。如果你认为散列太长，你也可以限制它的长度。
//web pack . prod . conf . js output : { path : config . build . assets root，filename : utils . assets path(‘ js/[name])。【chunkhash】。js ‘)，//Chunk Filename : utils . assets path(‘ js/[ID])。[区块散列]。js ‘)块文件名3360 utils . assets path(‘ js/[name])。[区块哈希33607]。js’)} 1234567完善各类CSS-。
在build/utils.js中，我们可以看到vue-cli项目自动帮助我们确定需要哪个css加载器。如果你想在将来轻松地停止移动package.json，你可以安装所有这些加载器。在安装sass-loader之前，需要预先安装node-sass。在安装Less-loader之前，需要安装less。下面是安装sass-loader和less-loader
m安装节点-sassassass-loader less-loader-save-de v1接下来——项目创建配置完成后，我们就开始写后台管理系统最重要也是最基础的部分，3354路由及其权限。基于权限的页面跳转将是重中之重。
当前源代码地址：https://github.com/harsima/vue-backend
请注意，源码会不断更新(因为工作忙，不能定时更新)。
