vue中页面与js分离写法

最新推荐文章于 2024-05-17 14:32:46 发布
最新推荐文章于 2024-05-17 14:32:46 发布
阅读量248 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49384626/article/details/132696372
版权

好久没写vue忘记怎么直接在页面导入js做到分离了,真的看了好多文章都没达到我想要的效果，好在最后想起来了
请添加图片描述
请添加图片描述
请添加图片描述
在这里插入图片描述

热爱Java的小华
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
springboot html vue.js 前后分离代码示例
03-24 1521
1.html <table class="table table-hover"> <thead> <tr> <th style="width: 50px;" id="cts"> <div class="checkbox d-inline"> <input type="checkbox" name="fhcheckbox" id="zcheckbox"> <label s
vue+mock.js实现前后端分离
10-16
主要为大家详细介绍了vue+mock.js实现前后端分离，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue在 Nuxt.js 中重定向 404 页面的方法
10-17
主要介绍了Vue在 Nuxt.js 中重定向 404 页面的方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
将JS从Vue中分离出来作为单JS文件,批量处理Vue页面过长的问题
Harry Blog
04-27 1109
https://github.com/haryy-1012/Vue-Separate-Js
VueJs--单页面js、css的分离
前端
12-18 7918
vueJs页面的分离 想要将.vue文件中的js、css拆分出来，使得文件的内容结构更加清晰 在.vue文件中使用之前的引入方式似乎存在问题，经测试后发现： .js文件的引入 js文件仍旧使用script标签，使用src属性指向文件所在位置 .css文件的引入 css文件的引入使用的是标签style,使用的属性是src,如果想要样式只作用 与当前页面，可以直接在标签上添加scoped属性 示例如下...
vue怎么把模板，脚本，样式把代码给分开
m0_57236802的博客
07-03 933
然而，如果你需要更大的灵活性，或者你的代码量很大，需要将它们分开管理，你可以考虑将它们放在不同的文件中，然后再在主组件文件中导入。此外，你的编辑器或 IDE 也需要对这种方式有良好的支持，才能提供诸如语法高亮、错误检查等功能。一般来说，将所有的东西都保持在一个。注意，这种方式需要你的构建工具（如 webpack）能够理解这种引用方式。在 Vue.js 中，通常你可以看到单文件组件的形式，其中包含了模板、脚本和样式都在一个。文件中是最简单和最方便的方式，但如果你有特殊的需求，上述方式是一种可能的选择。
分离vue或者uni-app的js和css
王兆镇的博客
09-08 959
分离vue或者uni-app的js和css
vue项目 抽离出script标签里的逻辑代码
misschengispink的博客
11-24 1065
vue文件的template内容较多，不便于开发，写逻辑和样式的时候要翻很久，此时将script逻辑代码抽离就可解决这一问题通常情况下，在单 .vue 文件开发很方便，但是当业务逻辑起来了，那么经常需要修改 script 和 template 部分，用编辑器分屏也不是那么好操作，故有了组件 script 分离。
vue中CSS与JS代码分离
偷得浮生半日闲
03-16 1703
前言 一个vue页面有着 HTML、CSS和JS代码，看起来代码过多，不好管理，所以就需要分开写CSS和JS 教程 在 assets 下创建 css 和 js 文件夹，在页面中引入 <script src="@/assets/js/home.js"/> <style lang="less" src="@/assets/css/home.less"/> 或者 <script src="../assets/js/home.js"/> <style lang="
解决vue单页面应用进入页面加载所有 js 的问题
11-19
一般在index.js中都是这么引入的组件 import from '@/pages/my' import Cart from '@/pages/cart' import Order from '@/pages/order' import TMap from '@/pages/map' import New from '@/pages/new' 换成这样就...
vue中页面跳转拦截器的实现方法
08-29
主要给大家介绍了关于vue中页面跳转拦截器的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧。
三种方式分割VueJS及Webpack代码
薄码生活
11-02 2045
原作者：Anthony Gore， https://medium.com/js-dojo/3-code-splitting-patterns-for-vuejs-and-webpack-b8fff1ea0ba4 代码分割 可以很好的提高单页面应用加载速度。用户不用等到所有代码一次加载完毕便可以很快的看到页面并与之交互。这尤其会提升移动端的用户体验，此外可以获得不错的SEO，因为Google会对...
vue项目vue.config.js配置打包压缩以及代码分离以及打包后dist文件夹添加时间戳实现更新后无缓存，自动压缩打包后dis文件夹并加上打包时间以及proxy代理
weixin_51406830的博客
03-15 3167
const moment = require('moment'); const TerserPlugin = require('terser-webpack-plugin') const FileManageerPlugin = require('filemanager-webpack-plugin'); const CompressionPlugin = require("compression-webpack-plugin"); module.exports = { configureWebpack
Vue抽离公共方法并全局注册使用
Web_chicken的博客
06-10 3091
举例说明：抽离一个公共下载方法 创建两个页面的原因是确定全局方法在不同页面都可使用 别忘了在main.js引入router 三、封装axios请求 assets文件夹下新建api文件夹并在此文件下新建home.js 四、创建公共下载方法 在assets文件夹下新建utils文件夹并在此文件下新建downLoadTempFile.js......
Vue.js---实现前后端分离架构中前端页面搭建（一）
Lalalajtyy的博客
05-22 1632
【Vue.js实现前后端分离架构中前端页面搭建】 一、前后端分离 1. 简介 前后端分离属于软件架构的一种。其核心思想是把前端项目（Node.js实现的）和后端项目独立部署到不同的服务器上，前端项目在通过Ajax请求服务器端项目Restful接口实现数据交互。 使用前后端分离架构的项目在项目组中往往配备前端工程师和后端工程师。后端工程师就是我们，对于我们我们来说，不需要在项目中编写页面了，写到控制器返回数据即可，最后把项目部署到服务器上。而前端项目中主要是一些HTML、JavaScript、图片等资
Vue高级篇--实现前后端完全分离
Ysuhang的博客
08-09 7966
Vue高级篇--实现前后端完全分离
vue.js框架组件中将JavaScript和HTML代码分离的两种方式
weixin_33904756的博客
03-10 2931
1.vue.js框架组件中，template选项中拼接HTML元素比较麻烦，如果将js和HTML分离开，那么代码就会很清晰了 这样也便于阅读和维护代码。 2.方法：使用<script></script>和<template></template>标签 3.实现例子： 1）使用<script></script> &lt...
HOW - Canvas 入门系列之基于vue-konva的多维表格（四）
weixin_58540586的博客
05-17 1190
今天我们将将基于vue-konva 实现的一个表格渲染的组件。
WEB转Flutter基础学习笔记（内含vue和flutter对比）
最新发布
小易不止于搬砖的博客
05-17 677
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue2.0 多页面 分开打包命令
07-14
### 回答1： 在Vue 2.0中，我们可以通过配置多个入口文件并使用不同的页面模板来实现多页面的分开打包。下面是一个简单的示例： 首先，在项目的根目录下创建一个名为"pages"的文件夹，用于存放多个页面的相关文件。 然后，在项目的根目录下找到"vue.config.js"文件（如果没有则需要手动创建），并添加以下配置： ```javascript module.exports = { pages: { app1: { entry: 'pages/app1/main.js', template: 'pages/app1/index.html', filename: 'app1.html' }, app2: { entry: 'pages/app2/main.js', template: 'pages/app2/index.html', filename: 'app2.html' } } } ``` 在上面的配置中，我们定义了两个页面：app1和app2。每个页面都有对应的入口文件和模板文件。 接下来，我们需要创建对应的入口文件和模板文件。以app1为例，在"pages"文件夹下创建一个名为"app1"的文件夹，并在该文件夹下创建一个名为"main.js"的文件作为入口文件。在"pages/app1"文件夹下还需要创建一个名为"index.html"的文件作为模板文件。 在入口文件"main.js"中，我们需要引入Vue和根组件，并创建一个根实例： ```javascript import Vue from 'vue' import App from './App.vue' new Vue({ render: h => h(App) }).$mount('#app') ``` 在模板文件"index.html"中，我们可以编写对应页面的HTML结构，然后在其中动态引入打包后的脚本文件。 最后，我们可以使用命令行运行以下命令来进行打包： ``` npm run build ``` 执行上述命令后，Vue会自动根据配置将每个页面的入口文件打包成对应的HTML和JS文件。在打包完成后，可以在"dist"文件夹下找到生成的多个页面文件。 通过上述配置和步骤，我们可以实现Vue 2.0的多页面分开打包。 ### 回答2： 在Vue2.0中，如果要进行多页面开发，并且希望进行分开打包，需要进行如下的配置和命令操作： 首先，在项目的根目录下新建一个`pages`文件夹，用于存放多个页面的代码。每个页面都应该有自己独立的目录，并在目录中创建一个`main.js`文件作为入口文件。 接下来，需要修改`webpack.config.js`文件，使其支持多页面打包。具体配置如下： ```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); const path = require('path'); // 需要打包的页面数组 const pages = [ { name: 'page1', title: '页面1' }, { name: 'page2', title: '页面2' }, // ... ]; module.exports = { // ...其他配置 entry: {}, plugins: [], // ...其他配置 // 添加多页面的入口和插件配置 pages.forEach(page => { module.exports.entry[page.name] = path.resolve(__dirname, `./pages/${page.name}/main.js`); module.exports.plugins.push(new HtmlWebpackPlugin({ filename: `${page.name}.html`, template: path.resolve(__dirname, './index.html'), title: page.title, chunks: [page.name], })); }), }; ``` 上述配置中，我们通过`entry`属性指定了多个入口文件，通过`plugins`属性添加了多个HtmlWebpackPlugin插件，用于生成多个html文件。 然后，需要修改`index.html`文件，将原来的`<script src="/dist/build.js"></script>`替换为`<script src="/dist/[page.name].js"></script>`。 最后，在命令行运行`npm run build`命令进行打包即可。打包完成后，`dist`目录下会生成多个js文件和对应的html文件，每个页面都有独立的打包输出。 总结起来，实现Vue2.0多页面分开打包的命令，主要包括以下几个步骤：新建多个页面目录，修改webpack配置，修改index.html文件，运行打包命令。 ### 回答3： 在Vue 2.0中，如果我们需要进行多页面开发，可以使用webpack的配置来进行分开打包。 第一步，我们需要在webpack中配置多入口。我们可以在webpack的配置文件中的entry中添加多个入口文件，每个入口文件对应一个页面。例如： ``` entry: { page1: './src/page1.js', page2: './src/page2.js', }, ``` 这样就配置了两个页面的入口文件。 第二步，我们需要为每个页面配置独立的模板文件。可以在webpack的配置文件中的plugins中添加多个HtmlWebpackPlugin，同时在每个HtmlWebpackPlugin中指定对应的模板文件和生成的html文件名。例如： ``` plugins: [ new HtmlWebpackPlugin({ template: './src/page1.html', filename: 'page1.html', chunks: ['page1'] }), new HtmlWebpackPlugin({ template: './src/page2.html', filename: 'page2.html', chunks: ['page2'] }), ], ``` 这样就配置了两个页面的模板文件和对应的html文件。 第三步，我们可以通过npm脚本进行打包。在package.json文件中的script中添加多个打包命令，每个命令对应一个页面的打包。例如： ``` "scripts": { "build:page1": "webpack --config webpack.conf.js --progress --colors --mode=production --env.page=page1", "build:page2": "webpack --config webpack.conf.js --progress --colors --mode=production --env.page=page2" } ``` 这样就配置了两个打包命令，分别对应两个页面的打包。 最后，我们可以通过运行对应的打包命令来分别打包每个页面。例如，运行`npm run build:page1`命令可以对第一个页面进行打包，运行`npm run build:page2`命令可以对第二个页面进行打包。打包完成后，每个页面的打包文件会在指定的输出目录中生成。 以上就是Vue 2.0中多页面分开打包的命令配置过程。通过这种方式，我们可以方便地对多个页面进行独立的打包和部署。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值