Vue项目启动（vue项目启动命令）

qiaoqingyi 2023-03-09 646

默认

今天给各位分享Vue项目启动的知识，其中也会对vue项目启动命令进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

1、Vue项目启动过程以及配置
2、vue本地启动项目,访问web服务器发送请求的区别
3、vue项目启动后访问的是dist吗
4、Vue项目启动加载逻辑介绍
5、vue项目没有page.json怎么启动项目
6、vue项目启动Cannot read property 'match' of undefined

Vue项目启动过程以及配置

我们点击 npm run dev 的时候，这就是启动 Vue 工程项目，那么它启动过程是什么样的呢？ Vue 项目启动过程，本文简要介绍。

在执行 npm run dev 的时候，会在当前目录中寻找 package.json 文件，包含项目的名称版本、项目依赖等相关信息。

从下图中可以看到，启动 npm run dev 命令后，会加载 build/webpack.dev.conf.js 配置并启动 webpack-dev-server 。

webpack.dev.conf.js 中引入了很多模块的内容，其中就包括 config 目录下服务器环境的配置文件。

可以看到，在 index.js 文件中包含服务器 host 和 port 以及入口文件的相关配置，默认启动端口是 8080 ，这里可以进行修改。

index.html 的内容很简单，主要是提供一个 div 给 vue 挂载。

main.js 中，引入了 vue 、 App 和 router 模块，创建了一个 Vue 对象，并把 App.vue 模板的内容挂载到 index.html 的 id 为 app 的 div 标签下，并绑定了一个路由配置。

上面 main.js 把 App.vue 模板的内容，放置在了 index.html 的 div 标签下面。查看 App.vue 的内容我们看到，这个页面的内容由一个 logo 和一个待放置内容的 router-view ， router-view 的内容将由 router 配置决定。

查看 route 目录下的 index.js ，我们发现这里配置了一个路由，在访问路径 / 的时候，会把 HelloWorld 模板的内容放置到上面的 router-view 中。

HelloWorld 中主要是一些 Vue 介绍显示内容。

所以，页面关系组成是 index.html 包含 App.vue，App.vue 包含 HelloWorld.vue 。

到这，我们开始安装 router 、 vuex 。

Ctrl+C 退出启动，继续执行 vue-cli ，脚手架安装插件 router 和 vuex 开始。

输入一个大写Y，按下Enter

vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。

Vuex 主要有五部分：

① 安装 vuex

接下来我们在 src目录下创建一个 vuex 文件夹

并在 vuex文件夹下创建一个 store.js 文件

文件夹目录长得是这个样子

在保证我们处于我们项目下，在命令行输入下面命令，然后，安装 vuex 。

② vuex 的关系图

③ 开始使用，在 mian.js 中，引入 vuex

④然后告知 vue 开始使用 vuex (Vue.use(Vuex))

在 store.js 文件中，引入 vuex 并且使用 vuex ，这里注意我的变量名是大写 Vue 和 Vuex

⑤接下来，在main.js中引入store

到这里算是，以及完成了。

我们再重新看一下此时的项目结构，多了router.js和store.js，其它相关的文件也被修改

vue本地启动项目,访问web服务器发送请求的区别

1、Vue本地启动项目：Vue项目可以在本地启动，通过npm run serve可以启动一个本地服务器，本地服务器可以提供静态文件，不支持动态数据的处理，比如数据库操作等。

2、访问web服务器发送请求：访问web服务器发送请求，可以通过HTTP协议，客户端发出请求，服务端处理请求，返回响应给客户端，可以进行动态数据的处理，比如数据库操作等。

vue项目启动后访问的是dist吗

您好，是的，Vue 项目启动后访问的是 dist 目录。Vue 是一个构建用户界面的框架，它的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue 项目启动后，会在 dist 目录下生成一个文件，这个文件就是用户访问的文件，它包含了所有的前端静态资源，如 HTML、CSS、JavaScript 等，用户可以通过访问这个文件来访问 Vue 项目。

Vue项目启动加载逻辑介绍

下面说下Vue项目启动的加载逻辑：

首先前端项目默认入口都是index.html

这里有个DIV的id为app，这里是vue的挂载点，后续views中的 .vue文件都会挂载在这里。

程序运行index.html后会寻找用到app的文件，即main.js

这里创建了一个vue实例，挂载了#app，也就是index.html中的id为app的div元素，接着加载App.vue中的页面

打开App.vue文件，查看配置有router-link和router-view

router-link 定义点击后导航到哪个路径下

router-view 会动态的把对应的组件内容渲染到router-view中

上面router-view中加载的内容有路由决定，于是再到路由文件查看此路由定义

路由配置文件中如图所示两种方式都可以实现。

接下来加载的就是具体的功能模块了

例如在Home.vue这个模块中又引入了HelloWorld.vue公共组件模块

关联了该组件，也会加载进去

项目运行起来后，会先去找入口文件index.html，在index.html中找到其实例需要挂载的位置，然后找到main.js中实例创建的地方，去加载组件中的模板，然后通过模板中的router-view，得知需要去查找路由，找到后加载对应的模板，如果模板中引用了公共的模板再加载公共模板进来，最后把处理后的这些呈现到浏览器中。