使用Vue

2023-10-02 20:16| 来源: 网络整理| 查看: 265

关于vue、vue-cli、webpack相关的内容在这里就不一一细说了，不了解的可以参考官网教程，在这里直接进入正题

1. vue init webpack创建工程，得到的工程结构如下：

执行 vue init webpack pro_name 在这里插入图片描述执行 npm run dev，保证项目可以正常运行

2.调整项目目录结构

打开目录文件夹，修改src下的目录，在src文件夹里新建pages文件夹，用于存放页面文件，然后在pages文件夹下新建index文件夹，把现有的页面文件移入index文件夹，过程如下： 1）现在的结构在这里插入图片描述 2）在src下新建pages，在pages下新建index 3）把现在的页面相关文件移入index文件夹(src下的相关文件和最外层的index.html)，保证入口文件js与文件夹一直，把main.js改名为index.js 调整后的结构：至此，文件目录调整完毕。

3.多入口和多页面输出的相关配置修改

1）.找到build文件夹下的utils.js文件在这里插入图片描述插入如下代码：

// glob是webpack安装时依赖的一个第三方模块，还模块允许你使用 *等符号, 例如lib/*.js就是获取lib文件夹下的所有js后缀名的文件 var glob = require('glob') // 页面模板 var HtmlWebpackPlugin = require('html-webpack-plugin') // 取得相应的页面路径，因为之前的配置，所以是src文件夹下的pages文件夹 var PAGE_PATH = path.resolve(__dirname, '../src/pages') // 用于做相应的merge处理 var merge = require('webpack-merge') //多入口配置 // 通过glob模块读取pages文件夹下的所有对应文件夹下的js后缀文件，如果该文件存在 // 那么就作为入口处理 exports.entries = function() { var entryFiles = glob.sync(PAGE_PATH + '/*/*.js') var map = {} entryFiles.forEach((filePath) => { var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.')) map[filename] = filePath }) return map } //多页面输出配置 // 与上面的多页面入口配置相同，读取pages文件夹下的对应的html后缀文件，然后放入数组中 exports.htmlPlugin = function() { let entryHtml = glob.sync(PAGE_PATH + '/*/*.html') let arr = [] entryHtml.forEach((filePath) => { let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.')) let conf = { // 模板来源 template: filePath, // 文件名称 filename: filename + '.html', // 页面模板需要加对应的js脚本，如果不加这行则每个页面都会引入所有的js脚本 chunks: ['manifest', 'vendor', filename], inject: true } if (process.env.NODE_ENV === 'production') { conf = merge(conf, { minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true }, chunksSortMode: 'dependency' }) } arr.push(new HtmlWebpackPlugin(conf)) }) return arr }

2）.修改build/webpack.base.conf.js的入口配置在这里插入图片描述改为 entry: utils.entries() 3）.修改build/webpack.dev.conf.js（开发环境）的多页面配置 4）.修改build/webpack.prod.conf.js（生产环境）的多页面配置到这里，项目的配置修改已经完成，可以运行项目检验下是否可以正常打开入口文件

4.新建入口文件

1）在pages文件夹下新建一个文件夹，放入新的html文件，npm run dev重新编译工程，可以正常访问到该文件即证明多页面配置成功！在这里插入图片描述 2）新建一个vue结构带有router的文件夹 vueTest.html:

Document

vueTest.js

import Vue from 'vue' import VueTest from './vueTest.vue' import router from './router' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#vueTest', router, components: { VueTest }, template: '' })

vueTest.vue

this is vue-test export default { name: 'vueTest' } path: '/', name: 'HelloWorld', component: HelloWorld } ] })

重新编译项目，新入口添加成功在这里插入图片描述执行 npm run build后，我们可以看到dist文件夹中生成了对应pages下文件夹数量的多个入口文件，vue页面也在js、css文件夹中也生成了对应的文件

【本文地址】

使用Vue

使用Vue

今日新闻

推荐新闻