今天给各位分享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，得知需要去查找路由，找到后加载对应的模板，如果模板中引用了公共的模板再加载公共模板进来，最后把处理后的这些呈现到浏览器中。

vue项目没有page.json怎么启动项目

1、首先打开电脑输入解锁密码，并进入系统主页面。

2、其次打开《vue项目》，进入前端的根目录。

3、最后输入命令“npmrundev”即可启动。

vue项目启动Cannot read property 'match' of undefined

运行npm run serve 的时候，报错。错误情况如下：

npm ERR! Cannot read property 'match' of undefined

npm ERR! A complete log of this run can be found in:

npm ERR!    C:\Users\user\AppData\Roaming\npm-cache\_logs\2018-08-06T01_49_46_486Z-debug.log

删了项目文件夹下面的package-lock.json,然后再运行

如果还是不行的话，那就执行命令，安装依赖时间会比较长，请耐心等待！！！！

rm -rf node_modules     // 删除依赖包

rm package-lock.json     // 删除package-lock.json文件

npm cache clear --force    // 清楚本地缓存

npm install    // 安装依赖

npm run sever    // 运行项目

Vue项目启动的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于vue项目启动命令、Vue项目启动的信息别忘了在本站进行查找喔。