当前位置: 首页 > Web前端 > HTML

基于vue-cli的多页面应用的空脚手架

时间:2023-04-02 17:04:13 HTML

vue2.*(多页跳转)@[vue2.3.3|webpack2.6.1|less|axios]之前看到相关朋友分享空多页脚手架。但是下的都是webpack1.0或者vue1的。0.刚好项目需要用到vue。在vue-cli的基础上进行了修改。babel可以直接使用es6。如需修改配置,请到.babelrc修改,全局引用JQ(如果不需要或不喜欢,请到base.conf.js修改)多-页面空脚手架链接如果需要路由版本,在github的另一个文件夹下命令国际惯例npminstall(或者cnpmothers)安装依赖包npmrundev并开始服务npmrunbuild在线包运行后,需要输入url显示具体页面/module/*.html(*为对应文件夹的名称)。添加新文件夹后,需要重新npmrundev查看目录结构1.build/config:一系列配置文件2.src:页面文件3.(src)assets:js常用方法/配置方法不太常见的样式和reset.csslib.js页面参考入口4.(src)components:使用的复杂组件5.(src)module:相关页面(每个文件夹代表一个页面)app.vue(page)*.html(入口页面的,需要和文件夹名一致)*.js(页面的js入口需要和文件夹名一致)static文件夹里的tpl有模板,直接复制即可。还有人设置webpack启动跳转。可以在build/dev-server.js中配置(默认是localhost:端口号)//varuri='http://localhost:'+port//修改启动后的跳转地址varuri='http://localhost:'+port+'/module/template.html'templateapp.vue引入常用的样式、配置和方法importLibfrom'assets/lib.js';axios请求拦截配置在assets/conf.js中。axios已经全局引入(使用this.$axios请求)如果有必要。具体配置请到conf.js中添加importVuefrom'vue';importaxiosfrom'axios';//拦截方法...Vue.prototype.$axios=axios;一些公共方法在assets/common.js中配置。如需添加,请自行添加添加引用路径的别名需要在开发过程中引入各种东西,以减少要写入的路径地址。build/webpack.base.conf.js中的alias进行了一系列的配置newwebpack.ProvidePlugin这部分是针对项目全局导入内容的端口号在config/index.js中进行修改;开发过程中的proxy,请到config文件夹下index.js中的proxyTable进行修改。具体可以参考这个github链接/*param:*:表示挂代理时,识别的请求前缀url:表示代理的地址*/'/*':{target:'url',changeOrigin:true,pathRewrite:{'^/*':'/*'}}我还在学习我只是想设置一个空架子以备将来使用。vue-cli生成的一些语句暂时还不清楚。希望能帮到需要的或者不需要的,给大家挖个坑。互相学习0723模板修改样式标签中独立样式的标识错误。导致组件的样式相互影响-//(scopeiswrong)通过js引入拆分样式文件(为了更好的使用mixin方法)lib.js//直接引入,不用js//引入全局样式//import'assets/less/reset.css';//import'assets/less/common.less';1.在页面统一入口的*.js中引入reset.css(重置css)2.在每个*.vue样式中引入common.less(常用样式和mixin方法)//@import'~assets/less/common.less';(~prefix在style的导入路径中与alias一起使用)