vue项目启动命令_vue30启动命令

vue项目为啥要启动？

因为vue是单页面应用，vue是依靠数据进行驱动来更新数据的。而数据来源于后端，需要vue与后端通过接口通信来获取数据信息。

vue项目启动命令_vue30启动命令

vue项目启动命令_vue30启动命令

vue项目启动命令_vue30启动命令

而后端是需要项目启动的，所以vue项目也需要启动，配置端口，打包发布到上面才能正常运行。

vue项目的启动是是通过webpack命令进行启动，使用命令npmrundev就可以启动vue项目了

因为是前后端分离的项目，需要编译运行在上。

vue项目中怎么进入powersell

这个进入的方法如下：

1、打开电脑的PowerShell终端窗口。在Windows系统中，可以通过按下“Windows键+X”组合键，然后选择“Windows Power Shell”来打开Power Shell。

2、使用Power Shell进入你的Vue项目所在的文件夹。可以使用“cd”命令（例如：cdD：myVue Project）来切换到项目所在的目录。

3、在Power Shell终端中输入下列命令：npm run serve，这个命令可以启动Vue项目，并在浏览器中打开该项目。

4、等待项目成功启动后，可以在浏览器中输入在项目的配置文件中的端口号，即可进入Vue项目。

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项目里面没有html咋启动

在项目文件夹npmrunserve出现这个内容表示项目启动完成，vue里面的html页面放在public文件夹里面。

1、首先在static或public文件夹下，新建html页面。

2、其次进入项目文件夹，在cmd命令行运行命令。

vue里 npm run build后应该怎么运行

npm run dev是在开发模式下运行项目，可以加载一些调试的模块如hotload；

npm run build是项目打包命令，运行这个命令后会生成可以进行上线的打包文件，这时候打开根目录下的index.html就可以直接看到你的项目效果了

npm run dev是在开发模式下运行项目，可以加载一些调试的模块如hotload；

npm run build是项目打包命令，运行这个命令后会生成可以进行上线的打包文件，这时候打开根目录下的index.html就可以直接看到你的项目效果了

npm启动vue-cli-serv serve问题

1.问题提出

脚手架vue-cli (vue create )搭建出来的项目，2. 默认设置用npm run dev启动本地localhost及网络Network服务，4.4+默认用npm run serve启动

如果启动不成功，报错

2.问题解析

npm 允许在 package.json 文件里面，使用 scripts 字段定义脚本命令。

对于 scripts 中配置有

的项目需要用 npm run serve 启动；

对于 scripts 中配置有

的项目需要用 npm run dev 启动；

4.解决方法

知道以上东西解决起来就很简单了，如果有习惯问题，就每次自己配置 package.json 文件中 vue-cli-serv serve 的启动设置。如果不想修改 package.json 文件，就找到 package.json 文件中 vue-cli-serv serve 设置的对象key值，用 npm run (key值) 启动。

次编辑 20200618 aichishaqima