如何在没有Vue-Cli的情况下创建一个多页面Vue.js应用？
在没有Vue-Cli的情况下创建一个多页面Vue.js应用可以按照以下步骤进行：
- 首先，确保你已经安装了Node.js和Vue.js的运行环境。
- 创建一个新的项目文件夹，并在该文件夹下创建一个
src文件夹用于存放源代码。 - 在
src文件夹下创建一个pages文件夹，用于存放多个页面的代码。 - 在
pages文件夹下创建多个.vue文件，每个文件代表一个页面。可以根据需要自定义页面的名称。 - 在每个
.vue文件中，按照Vue.js的组件开发方式编写页面的代码。 - 在
src文件夹下创建一个main.js文件，用于创建Vue实例和配置路由。 - 在
main.js文件中，引入Vue.js和Vue Router，并创建一个新的Vue实例。 - 配置Vue Router，设置多个路由对应不同的页面。可以使用
component属性指定每个路由对应的组件。 - 在
main.js文件中，使用router-view组件来渲染路由对应的页面。 - 在项目根目录下创建一个
index.html文件作为入口文件。 - 在
index.html文件中，引入Vue.js和main.js文件。 - 在
index.html文件中，创建多个<div>元素，用于渲染不同的页面。 - 在
index.html文件中，使用JavaScript代码获取当前页面的URL，并根据URL来动态显示对应的页面。 - 在
index.html文件中，使用<script>标签来引入每个页面对应的JavaScript文件。 - 在每个页面对应的JavaScript文件中，创建Vue实例，并将其挂载到对应的
<div>元素上。 - 最后，在命令行中使用
node命令启动一个本地服务器，将项目部署到本地环境进行测试。
需要注意的是，以上步骤是在没有Vue-Cli的情况下手动创建多页面Vue.js应用的基本流程。如果有Vue-Cli的话，可以使用其提供的命令行工具更方便地创建和管理多页面应用。
相关·内容
我是JavaScript和Vue.js的完全初学者。昨天，我用vue-cli启动了一个Vue.js项目，因为我的工作需要它，我遇到了一些问题。我想安装“漂亮-复选框-vue”，它目前在我的'node_module‘文件夹。
在这个包的README.md of 中，它说：
浏览器
包含脚本文件，然后用Vue.use(PrettyCheckbox)安装组件；例如：
<script type="text/javascript" src="node_modules/pretty-checkbox-vue/dist/pretty-checkbox-vue.min.j
浏览 0提问于2020-09-30得票数 0
1回答
我正在试着把一个静态登录页面和一个vuejs应用程序放在一起，但我需要一些帮助。 VueJS Documentation上的多页面应用程序指南不是很清楚，或者可能不适合我的情况:我没有任何js文件来指向静态页面。 pages: {
landingpage: {
entry: 'src/landingpage/main.js', //entry for the public page
template: 'public/index.html', // source template
filename: 'index.html&
浏览 11提问于2021-01-12得票数 0
回答已采纳
我已经配置了vue-cli3来构建一个多页面应用程序，遵循这个指南，我的应用程序有2个静态页面，并且我能够设置vue.config.js，如下所示。当我运行应用程序时，它会按预期加载索引页，但我无法导航到另一个页面。 索引页在http://localhost:8080/下面的基本url上提供 我尝试了以下urls，但它们无法加载第二个页面http://localhost:8080/user.html http://localhost:8080/user http://localhost:8080/user/user.html 文档说明生成的文件“输出为dist/user.html”，但不清楚
浏览 15提问于2019-05-09得票数 4
我用cli命令vue init vue@latest创建了一个vue应用程序，它使用Vite。我正在尝试制作一个有3页(目前)的应用程序。主页，创建条目表单页和浏览条目页。我一直在谷歌、youtube和堆栈溢出网站上寻找解决方案，但到目前为止似乎什么也没有奏效。
这是我的router/index.js文件：
import {createRouter, createWebHistory} from 'vue-router';
import {HomeView} from '../views/HomeView.vue';
const router = create
浏览 4提问于2022-06-09得票数 0
我有一个多页面的Vue.js应用程序，在域/合法；域/提交等方面有工作页面。我在Vue.js‘ (即自定义vue.config.js)的帮助下实现了这一点。
换句话说，我很好地完成了上面的工作。
现在，我正在尝试在新的子目录级别下实现更多嵌套的页面(除了上面已经有的那些)。即
域/org/profile1
域/org/profile2
域/org/profile3
通过自定义vue.config.js使其工作的任何方法
当前尝试vue.config.js代码：
module.exports = {
pages: {
index: {
entry: &
浏览 2提问于2020-07-16得票数 7
回答已采纳
1回答
我使用vue.js和vue.config.js方法创建了一个多页面应用程序，我开发它时没有问题，我创建了一个可以访问主页的产品构建，但是我不能访问其他页面，比如我们、portfolio等等。
有什么问题吗？？以及如何解决这个问题？是关于.htacess的吗？
这是我的vue.config.js代码
module.exports = {
pages: {
index: {
entry: './src/pages/Home/main.js',
template: 'public/index.html',
浏览 2提问于2020-07-02得票数 4
因此，我试图学习Vue.js + webpack，并通过以下步骤模拟一个项目：
f:www\> npm install -g vue-cli
f:www\> vue init webpack-simple my-project
f:www\> cd my-project
f:www\> npm install
f:www\> npm run dev
默认页面在http://localhost:8080/上运行。
现在，在webpack.config.js文件中，我有以下几行：
entry: './src/index.js',
output:
浏览 0提问于2019-03-25得票数 0
12回答
我只是使用命令行(CLI)来初始化一个Vue.js项目。CLI创建了一个src/components和src/views文件夹。
自从我使用Vue项目以来已经有几个月了，文件夹结构对我来说似乎是新的。
用views生成的Vue项目中的components和文件夹之间有什么区别？
浏览 2提问于2018-06-14得票数 221
回答已采纳
我使用Vue CLI和Vue 2构建了一个多页面应用程序，方法是更改vue.config.js，如下所示：
pages: {
index: {
entry: './src/pages/index/main.js',
template: 'public/index.html',
title: 'index page',
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
ad
浏览 4提问于2021-01-24得票数 6
回答已采纳
3回答
将最初使用vue-cli创建的vue.js应用程序部署到Firebase主机的最佳方式是什么？我用以下命令准备了vue-app
npm run build
这将创建文件夹"dist“，其中包含捆绑的js-file和图片等资源。
然后-在全局安装firebase工具之后，我运行
firebase init
这将创建一个文件夹"public“，其中包含默认的index.html文件。
首先我在firebase.json中设置：
"hosting": {
"public": "dist"
}
并将index.html ( vue i
浏览 39提问于2017-12-22得票数 3
1回答
我想在多页vue应用程序的页面之间传输数据。我试过vuex和store，但它不起作用。 我用vue.config.js文件制作了多页应用程序。每个页面都有自己的App.vue和main.js。当我将store.js导入main.js时，在那里初始化它，它只对它自己的App.vue起作用。但我需要将数据从一个页面传输到另一个页面。从一个App.vue到另一个App.vue。 (例如：-当我在一个页面上点击一个人的名字时，它应该加载这个人的个人资料和他的详细信息。(这是另一个页面))。我的计划是，当有人点击个人资料图片时，该人的详细信息将转到商店，我想在个人资料页面中检索它们。它没有起作用。我是
浏览 29提问于2021-07-17得票数 0
也许8-9个月前，我用vue-cli创建了一个网络包装的Vue.js项目，并能够修改/build/webpack.dev.conf.js，让它在运行npm run build时将“编译”的index.html和JavaScript / CSS文件放在/build/webpack.dev.conf.js应用程序的正确文件夹中。
现在我正在向其他人展示如何创建Vue.js / Flask应用程序，我看到vue-cli的工作方式似乎已经改变了，这样我就不能再访问/build/文件夹了。
我读到了docs和，它现在抽象出Webpack配置(“既然@vue/cli-service抽象掉了webpack配
浏览 2提问于2018-02-18得票数 59
回答已采纳
1回答
我用Vue.js和vue-cli。我选择了webpack的圈套。我连接了main.js文件以进行路由，但我找不到一种方法来在全局注册我的组件。
main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
import Companies from './components/pages/Companies'
import Income from './components/pages/Income'
浏览 3提问于2016-03-16得票数 20
回答已采纳
我安装了node.js，通过xampp运行apache，并配置了我的apache服务器，这样我就可以在本地机器上使用作为我的实践服务器域。
我以admin方式启动了命令提示符，并输入了以下行，但它们都成功运行：
安装vue-cli
$ npm install --global vue-cli
使用"webpack“模板创建一个新项目
$ vue init webpack my-project
安装依赖项并启动！
$ cd my-project
$ npm install
$ npm run dev
我遵循了上的cli安装部分
当我转到我的文件夹中时，所有的vue.js文件都安装在“my
浏览 5提问于2016-12-15得票数 5
回答已采纳
我是Vue的初学者，我正在尝试用Vue构建一个多页面的web应用程序。但以下是我的问题：
Failed to compile.
./src/index/views/Home.vue?vue&type=script&lang=js& (./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-lo
浏览 1提问于2020-06-19得票数 1
回答已采纳
2回答
我正在努力学习vue.js，我在使路由工作方面遇到了问题。我想使用模板，这些模板在其他html文件中，所以没有内联模板。
所发生的情况是，路由从来没有固定在我的页面，我没有收到错误。我不知道该怎么做，你能帮忙吗？
这是我的index.html
<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>Test</title>
浏览 1提问于2016-11-11得票数 10
我刚刚开始使用Vue.js + Webpack +vue-加载程序+引导-sass+sass-加载程序，我有点迷路了。
我想做的是在我的SPA Vue.js代码中使用SASS版本的引导程序。我想这样做，所以我的引导自定义可以使用SASS完成。以下是我所做的：
用vue-cli创建了一个新的Vue.js + webpack项目。
安装了引导程序-sass和sass-加载程序。
在build/webPack.base.conjs中添加了以下内容：
{ test: /..scss$/，加载程序：'style'，'css'，'sass‘}，{ tes
浏览 4提问于2016-02-10得票数 14
我有个vue-cli项目。这意味着，我有一个.vue文件和main.js。我想在main.js中调用.vue文件中的方法，但是我得到了没有定义函数的错误。如何在main.js中调用内部.vue文件方法？方法应在.vue文件中定义，而不是在新Vue{}中的main.js中定义。
浏览 65提问于2018-02-07得票数 2
我正在学习nodejs和vuejs来修改已经创建的网站。我安装了nodejs、vue和vue-cli，并启动了"npm run serve“，显然是启动了"vue-cli- serve”。
问题是我不明白这个web服务器对文件做了什么，在这个文档中：，它被告知：
It automatically infers the entry file in the current directory - the entry can be one of main.js, index.js, App.vue or app.vue. You can also explicitly specify
浏览 1提问于2021-09-23得票数 0
1回答
Vue子域在开发和生产中的应用
、、、、
我有以下(摘要)项目结构：
src/品牌
src/admin
src/home
品牌和管理是一个纯粹的vue项目，家庭是一个nuxt项目。我试图让品牌和管理项目在他们自己的子域(分别是brands.website.com和admin.website.com )上运行，在主域上运行。部署到生产/阶段是通过docker (带有nginx映像)进行的，我正在考虑将nginx配置文件从我的项目复制到docker映像中，以便将dist文件夹中的文件指向正确的html文件(还不确定如何首先研究这个问题)。
对于开发，我使用了vue.config.js (因为我使用的是vue cli的v
浏览 1提问于2019-01-06得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
