河南网站建设Vue CLI多页+Webpack实例应用教程

发布时间:2019/4/13 10:57:28
    
    Vue CLI+Web包多页实例应用程序
    
    关于VUE.JS
    
    Vue.js是一个轻量级的渐进式前端框架,用于构建用户界面。其目标是通过尽可能简单的API实现响应的数据绑定和复合视图组件。使用Vue可以为您的开发带来最佳的编程体验。
    
    论VUE CLI
    
    Vue cli是Vue官方提供的命令行工具(Vue cli),可用于快速构建大型单页应用程序。该工具提供了构建工具的现成配置,带来了现代的前端开发过程。启动具有热过载、节省时间的静态检查和生成的项目只需一分钟。可以在生产环境中使用的配置。
    
    怀疑
    
    VueCLI主要用于为单页应用程序构建脚手架,但在实际项目中,大多数项目都是多页的。如何充分利用这套官方配置我在网上搜索,几乎找不到一个Vue的多页应用实例,所以只有一个基于Vue-cli的单页应用进行了改造。
    
    代码地址:
    
    github:https://github.com/breezefeng/vue cli multipage,如果发现有用,请提供star支持~
    
    使用方法
    
    #install dependencies npm install serve with hot reload at localhost:8080/module/index.html npm run dev build for production with minification npm run build
    
    目录结构
    
    Vue CLI多页---构建---配置---SRC---资产---IMG图片文件---CSS样式文件---字体文件---组件---按钮。Vue按钮组件---你好。Vue---模块---索引。HTML---JS---app vue---详细信息。HTML---详细信息。JS---应用程序Vue。
    
    从目录结构来看,各种组件、页面模块、资源等都被划分为新的文件夹,以方便我们存储文档。
    
    实际上,我们所有的文件,最重要的是放在模块文件夹中,文件夹名为html。
    
    例如:
    
    |索引主页模块---索引。HTML---索引。JS---应用程序。VUE
    
    我们目前访问的链接是:
    
    http://localhost:8080/module/index.html
    
    需要注意的是,在模块中,较低的文件夹需要将HTML、JS、Vue模板放在当前文件夹中。当然,你可以继续放置其他资源,如CSS、图片、组件等。Webpack将被打包到当前页面中。
    
    如果项目不需要这个页面,可以直接删除文件夹,清理干净,很乐意工作。
    
    像传统的开发项目一样,所有的图片都被放置在图像中。当项目发生变化时,一些图片和其他资源不可用,但它们仍然占用一个坑,导致项目变得越来越大。虽然目前的硬件能力是惊人的,但我们还是应该养成一个好习惯。
    
    组件的使用
    
    组件是Vue最强大的功能之一。JS。当你发现使用组件可以减少你制造的轮子的数量时,你会深深地爱上它。
    
    我们的组件都放在组件目录中,调用组件的方法非常简单。
    
    从'components/hello'导入hello
    
    然后记住在*中注册导入的组件。Vue,否则它将不可用。
    
    从'components/hello'导入hello导出默认值名称:'app',组件://在此处注册组件,否则hello
    
    建筑规范说明
    
    所以我们使用了Vuecli的脚手架。使用了Vuecli的学生都知道构建代码放在根目录构建中。Vue多页主要修改三个JS文件:Webpack。底座。配置JS,Webpack。dev.conf.js,网络包。J.
    
    /********网络包。底座。conf.js这里是相关代码修改点的主要列表,请参见build /webpack。底座。conf.js*/var entries=get entry('https:///www.toutiao.com/item/6660606048800808080810244430606/src/module/**/**.js');/////获取条目JS文件模块。exports=entry:::::……(glotpath)glovar entrentrentententries,patme,basename var,basename,basename,basenaname,basbasenap pathname;glob.sync(globpath)。foreach(函数(入口)basename=path.basename(入口,path.extname(入口);tmp=entry.split('/')。拼接(-3);路径名=tmp.splice(0,1)+'/'+basename;//正确输出js和html路径条目name=entry;return entries;
    
    /**网络包。prod.conf.js这里是相关代码的主要修改点。有关特定代码,请参阅build /webpack。底座。prod.js*/function getentry(globpath)var entries=,basename,tmp,pathname;glob。同步(全局路径)。对于每个(函数)(条目)名称=路径。扩展名(条目),条目。split('/')名称;tmp=条目。熔接接头(-3);tmp=0.splic(拼接).1)+'/'/'+basename;/ / / /  /  / /////////正确输出JS和HTML路径项路径名=ent;;返回项;;var pages=getentry('https:/ / /www.toutiao.com/ite /666060606048488080808081242424430460606/SRC/模/mod模块/--/  /-/   // ////// /***.html');用于(页面中的var路径名){/////////////*.html';(页面中的var pathname)/////////配置生成的HTML文件,定义的路径conf文件名:路径名:路径名:路径名:::::,//模块板路径插入:真,//JS插入位置最小化:删除注释:真,//折叠空白:真,//删除属性引号:真,//必须与m一起使用通过Commons ChunkPlugin Chunks SortMode的多个块:'Dependency';if(模块中的名称)。conf.entry)chunks=manifest','pathdor',pathname conf.h=true;hasvenhash;模块。出口。插件。push(新HTML Web包插件(conf);
    
    没有修改过多少代码,但它为多页应用程序提供了强大的构建支持。欢迎使用它,我希望您可以进行更多的交流。
    
  

?
Copyright © 2022 www.pzxwangzhan.com 版权所有:郑州鹏之信网络科技有限公司 24小时服务热线:0371-67584767、152-3716-2233 地址:郑州市惠济区文化路英才街 北京地址:北京建国路88号soho现代城6号楼 备案:豫ICP备15001471号-1

豫公网安备41010702002835号