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);
没有修改过多少代码,但它为多页应用程序提供了强大的构建支持。欢迎使用它,我希望您可以进行更多的交流。