发布：2022/3/17 17:07:55作者：管理员 来源：本站 浏览次数：614
目录
一 下载node.js环境
二 配置node.js和npm环境变量
三 配置cnpm
四 使用vue-cli脚手架搭建vue开发环境
五 使用webpack打包工具，启动vue项目
六 vscode开发工具安装
七 vscode集成npm开发vue项目
八 搭建一个vue小页面(入门vue)
1 大致理解Vue设计思想
2 初学vue-router
3 直接Import组件
4 引用一些CSS模板
5 写出导航条
九 npm run命令
十 使用npm run build命令打包项目
1 项目打包
2 npm run build发生了什么？
3 代开
十一 vue项目使用websocket技术
1 WebSocket 是什么？
2 为什么需要 WebSocket ？
3 如何配置 WebSocket ？
十二 问题
1 'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序
2 npm安装模块遇到ENOENT: no such file or directory, rename错误
3 vue与vue-cli
Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层，并且非常容易学习，是一个基于MVVM结构的轻量级框架，非常容易与其它库或已有项目整合。
安装vue需要借助npm指令集，所以一般会先安装node.js环境。
一 下载node.js环境
打开node.js的官网下载地址：http://nodejs.cn/download/
选择适合自己系统的安装包，本文以windows x64系统为例。
在这里插入图片描述
下载安装包后正常安装，可以在安装过程中更换默认安装路径
安装后，打开cmd，分别输入以下指令验证是否成功，下图显示版本号即为正常安装，其余为异常情况。
在这里插入图片描述
二 配置node.js和npm环境变量
安装好之后，对npm安装的全局模块所在路径以及缓存所在路径，进行环境配置。是因为以后在执行类似：npm install express -g(后面的可选参数-g，g代表global全局安装的意思)的安装语句时，会将安装的模块安装到C:\Users\用户名\AppData\Roaming\npm路径中，占C盘空间。
首先在node.js的安装路径中新建两个文件夹，分别作为缓存文件夹和全局安装文件夹。
在这里插入图片描述
在cmd中输入以下指令，设置缓存和全局安装文件夹为上述新建文件夹。请将D:\Program Files\nodejs替换为你自己的node.js的安装路径。
npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"
打开“环境变量”。
path变量中新增
D:\Program Files\nodejs\node_global
D:\Program Files\nodejs\node_global\node_modules
三 配置cnpm
经过测试，cnpm安装的组件可能存在问题，在此不建议使用cnpm！！！
由于网络原因，国内访问npm的速度很慢，可以通过设置国内淘宝镜像来访问npm。
打开cmd，执行以下指令。
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm -v
cnpm config set prefix "D:\Program Files\nodejs\node_global"
cnpm config set cache "D:\Program Files\nodejs\node_cache"
利用cnpm搭建express环境，打开cmd，执行以下指令。
cnpm install express -g
在这里插入图片描述
四 使用vue-cli脚手架搭建vue开发环境
安装全局 vue-cli 脚手架，用于帮助搭建 vue 框架的模板项目。
打开cmd，执行以下指令(对于版本4以上的使用以下命令)。
npm install -g @vue/cli
在这里插入图片描述
关闭cmd重新打开，执行以下命令，验证vue安装是否成功
vue
vue -V
如果安装新版本vue，先卸载旧版本：
npm uninstall vue-cli -g
npm install -g @vue/cli
npm install -g @vue/cli-init
五 使用webpack打包工具，启动vue项目
创建一个工作空间用于保存项目，比如本文使用D:\workspace\vs_workspace，打开 cmd，通过 cd 指令进入该目录，输入下面指令，创建 hellovue 项目；
vue init webpack hellovue
一路回车，除了vue-router选择yes，其余一律no(下面是开启了Eslint插件功能，如果不需要则在 eslint 选项选择no)。
在这里插入图片描述
一路确认后得到下图：
在这里插入图片描述
按照提示，执行后续cmd指令：
cd hellovue
npm install
npm run lint -- --fix
npm run dev
在这里插入图片描述
中间部分内容略
在这里插入图片描述
不要关闭cmd窗口，根据指令提示，访问网址:http://localhost:8080，可以看到vue的网页
在这里插入图片描述
六 vscode开发工具安装
在vscode官网下载页面，下载vscode的安装程序，建议选择system版。
为了最好的开发体验，您需要安装以下插件配合使用：
可以参考这篇文章，写得很详尽。
1、Vue 开发工具 Vetur
用vue开发的必装，官方推荐，别纠结用哪个，就它了。
作用：高亮.vue文件，附带有格式化功能，配合Eslint插件对代码进行格式化检查。
2、代码规范监测 ESLint
如果你想你(团队)的代码风格所有地方看起来都像是同一个人写的，就靠它咯
作用：检查你的js、html、css代码，确保它们符合规范，并且代码风格保持一致性，强制性的规则，你少写一个空格或者多敲一个回车都会被严格的指出来，强迫症的福音，第一次用它的同学可能会抓狂，熟悉后你会感谢它
使用：想让插件生效，你的项目还得做一番复杂的配置，好在vue-cli生成的项目帮我们把配置都生成好了，你也不必修改什么规则，直接用就行，在使用vue-cli生成webpack项目时会询问你是否启用eslint并且使用哪套规范，选择Standard规范就行:
在这里插入图片描述
它会自动在你的项目根目录下生成.eslintignore和.eslintrc.js两个配置文件，package.json文件里增加下面的依赖：
"eslint": "^4.15.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.0",
3、代码格式化插件Prettier - Code formatter
上面三个插件，能够在保存时文件时自动格式化代码，运行项目时能够检测代码不规范的地方，针对上面三个插件的配置都已包含在了源码里面，只需安心编码即可~
Vue.config.js说明
代码生成器生成的Vue.config.js文件是已经配置好的，基本上不需要进行调整
七 vscode集成npm开发vue项目
启动vscode，点击“open folder”，选择刚才利用webpack打包生成的vue项目所在目录D:\workspace\vs_workspace\hellovue。
在这里插入图片描述
可以通过在Terminal控制台输入指令控制vue项目启动
在这里插入图片描述
八 搭建一个vue小页面(入门vue)
我们先回溯一下上一次的进度：刚刚使用 vue-cli 建立了一个项目，这个项目内似乎东西很多，但是我们只需要关注 src 文件夹下的东西就行了，运行 npm run dev 以后，浏览器会自动弹出一个页面。
我们要做的，就是开始理解Vue增删页面的模式，组件和路由(就是网页链接 URL)的跳转模式。
1 大致理解Vue设计思想
首先要理解的是 vue 的设计理念是怎样的？在我眼里，组件化是 vue 最为成功的一项涉及。组件化这个特性把一整个网站都打散成了很小的一个又一个部分。举个例子，看目前的目录下，有三个文件：整个项目目录下的 index.htm，src目录下的 App.vue，和 components 文件夹下的 HelloWorld.vue。
理解这三者的关系很重要，Index 是一个最外层的网站框架，它其实什么都没有，有一个 head，head 里边可以定义一些 CSS 一类的，然后 body 部分完全是空的，它仅仅载入了一个名字叫做 app 的 vue module。
所以说 App.vue 这个东西，就是嵌套在 index.html 中的。然后我们再看 App.vue 文件写了些什么？
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
额外说一句，vue文件都是这个模式，一共由三个部分构成：上边的<template>包含有最终用户看到的按钮框框；中间的 <script> 定义了这个组件(module)所用到的数据和函数；后边的<style>定义了这个组件的样式等等。
所以我们暂时只关注最上边的 <template>，其中只有两句代码比较核心：一行插入了一个图片，另一行写的是 <router-view/>。在这里，大概能猜到，App.vue里其实也差不多是空的，它只是给页面上添加了一个Logo而已，实质性的文章，都没有添加。那么我们看到的页面上的文字到底是哪里来的？它们全部在HelloWorld.vue文件里。App.vue调用了HelloWorld.vue这个组件，并将它显示在了Logo的下方，并且，是通过router来控制的显示，而不是直接插入组件。
最后，我们打开router文件夹下的index.js:
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
这个 router文件是针对 App.vue的路由，对应的内容，全部都会显示在刚才看到的那一行中，在这里， App.vue会自动寻找这一些组件，比如，在目前的 index.js中，path显示的是”/”对吧？这就意味着，当页面打开到 App.vue，而没有增加其他的url后缀的时候 (http://localhost:8080/#/)，App.vue会自动载入Hello这个组件，加载在那个Logo的下面。
如果还不能理解，下面我们做一个小实验：
你修改path的值为“/Hello”，那么你只有在(http://localhost:8080/#/Hello)才会重新看到刚才那个页面。而在(http://localhost:8080/#/)目录下，你会发现，只有一个logo，其他什么都没有。
稍微总结一下
上述的小实验已经充分证明了，index.html， App.vue， HelloWorld.vue之间的关系。一般来说，index.html是不用动的(顶多增加一些css头文件)。所以我们开始修改的其实文件就是App.vue，然后鉴于我们想要添加文件，所以需要修改router里边的index.js文件，最后鉴于我们要添加新页面和组件，我们还需要增加一些components文件夹里边的东西。
如果按照目前的index.js的结构，如果你怎么修改那个HelloWorld.vue文件，或者增加其他组件，它们只有一个归宿：就是躺在App.vue里的那个Logo图像的下面。因为App.vue是父组件，而HelloWorld.vue只不过是它的子组件。但是这并不意味着谁重要谁难写，因为如果你把App.vue里边那个logo那一行注释掉，App.vue就什么都无法呈现，仅仅是为HelloWorld.vue以及未来的一些页面提供了一个承载框架而已。
未来开发完的网站里，用户感觉上可能是一个页面和一个url的单独对应，就像是曾经的每一个PHP文件对应每一个url一样，但实际上，可能很多页面，都像HelloWorld.vue一样，仅仅是App.vue的子组件而已。
目前在App.vue里，有HelloWorld组件；以后我们在HelloWorld组件里，还可以插入其他的组件，当然不一定是这种使用router的办法，因为用这个模式，每一个组件都会有一个对应的url，如果你的页面上有三个tab，可能没有必要每一个tab对应一个url吧？但目前要理解的就是：我个人觉得Vue最核心的设计理念，就是把一个看起来很完整的页面，分散到了每一个组件，这个组件可能大道一个页面，HelloWorld.vue，也可能小到一个按钮，最终我们看到的页面，是这一群组件的堆砌的结果，这样做的一大好处就是，每一个组件都可以单独进行与数据库和用户的交互，开发更为清晰。
2 初学vue-router
继续，刚才我们通过修改 index.js 上的path，已经理解了，HelloWorld.vue 和 App.vue 的关系，以及网址和页面(或者说页面上的某一个部分)是如何对应上的。现在我们继续探索一下，如何在子页面上，添加路由。目前的局面是，App.vue 组件(它确实只是一个组件)下有 HelloWorld.vue 组件，而 HelloWorld.vue 的位置，是 App.vue 组件里面那个Logo的下面，下面我们用最快的速度再作出三个页面：
修改router文件夹下的index.js文件：
// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'
import FirstPage from '@/components/FirstPage'
import SecondPage from '@/components/SecondPage'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/Home',
name: 'Home',
component: Home
},
{
path: '/FirstPage',
name: 'FirstPage',
component: FirstPage
},
{
path: '/SecondPage',
name: 'SecondPage',
component: SecondPage
}
]
})
在这个文件中，我们添加了三个路由，Home，FirstPage，SecondPage，现在cmd那边肯定在报错，因为我们还没有建立那个对应的那三个Page页面的vue文件。
然后我们去components文件夹下，建立三个vue文件：Home.vue，FirstPage.vue， SecondPage.vue。内容几乎都一样，就三行，如下(每一个就只有中间的h1标签不同，其他都一样，中间那个分开写到三个页面里)，这三个页面就是分别Home，FirstPage，SecondPage将要渲染到屏幕上的东西。
// components/Home.vue
<template>
<h1> This is Home Page </h1>
//<h1> This is First Page </h1>
//<h1> This is Second Page </h1>
</template>
最后修改一下HelloWorld.vue页面，我们需要在其中加入链接，这样就可以点击某个按钮转移到新的界面了。(我多删了一些东西)，让页面看起来更清爽一些：
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<router-link id="Home" to="/Home">Home</router-link>
<router-link id="FirstPage" to="/FirstPage">FirstPage</router-link>
<router-link id="SecondPage" to="/SecondPage">SecondPage</router-link>
</ul>
<h2>Ecosystem</h2>
<li><a href="http://localhost:8080/#/Home" target="_blank">Home</a></li>
<li><a href="http://localhost:8080/#/FirstPage" target="_blank">FirstPage</a></li>
<li><a href="http://localhost:8080/#/SecondPage" target="_blank">SecondPage</a></li>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
上边这一段代码中，我添加了六个可以点击的连接，前三个用的是vue推荐的router-link方式，后三个用的是最传统的href的方式。我个人只用前者，之所以放在这里是做比较用的。然后页面就成了这个样子。
在这里插入图片描述
可以看到，目前所有的页面，都是在那个Logo下面，这是因为HelloWorld.vue，Home.vue，FirstPage.vue，SecondPage.vue，全部都是App.vue的下属组建。都是被放置在Logo下的，现在如果你去App.vue里把Logo删掉，它们就是看上去都完全不同的三个页面了。
刚才已经我们成功地学会了如何添加页面，这样以后做网站如果页面不够，就用这办法可以一个一个地加，如果想要添加那种完全依赖url驱动的网页，例如/user:1，/user:2这样的，我目前还不会，但应该不会太难。
下面我们尝试在一个子页面上添加组件：
严格来说，这句话是病句，因为HelloWorld.vue就是一个组件，我们要做的，实在组件上再添加组件，那么路由因该怎么弄？刚才做的东西，就是可以让我们在App.vue这个父组件中更换页面了，那么如何在HelloWorld.vue页面中做到更换？如果能实现这一步，网站的所有链接跳转就都能实现了，网站无非有两种，页面直接切换，或者页面中的某个部件发生替换(就像是我们刚才在Vue那个大Logo下替换Home， FirstPage一样)，所以我们需要学会如何在Vue的任何一个页面上，更换添加组件。
下面以Home.vue为例。
再打开router文件夹下的index.js，在之前写过的Home下面添加一个children路由：
// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Home from '@/components/Home'
import FirstPage from '@/components/FirstPage'
import SecondPage from '@/components/SecondPage'
import FirstPart from '@/components/HomeComponents/FirstPart'
import SecondPart from '@/components/HomeComponents/SecondPart'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello
},
{
path: '/Home',
name: 'Home',
component: Home,
children: [
{
path: '/',
name: 'FirstPart',
component: FirstPart
},
{
path: 'SecondPart',
name: 'SecondPart',
component: SecondPart
}
]
},
{
path: '/FirstPage',
name: 'FirstPage',
component: FirstPage
},
{
path: '/SecondPage',
name: 'SecondPage',
component: SecondPage
}
]
})
写完以后是上边这样子，我们在Home的路由中，又添加了两个子路由，FirstPart和SecondPart. 这里FirstPart的路由是”/”，代表着是默认选择，否则的话，一打开Home页面，FirstPart和SecondPart无法打开。
然后在Home.vue组件中添加几行：
<template>
<div>
<h1> This is Home Page </h1>
<router-link id="FirstPart" to="/Home">FirstPart</router-link>
<router-link id="SecondPart" to="/Home/SecondPart">SecondPart</router-link>
<hr>
<router-view/>
</div>
</template>
这样，我们就规定了，从Home页面渲染的组件，都显示在<hr>那条线下面。
<template>
<div>
<h2> This is First Part </h2>
</div>
</template>
好了，然后再刷新页面，转到Home页面上，就可以看到：
在这里插入图片描述
这样，我们就成功地在Home页上又添加了两个小的页面。
学会这一步以后，我们就可以随意地增删页面，而且页面上也可以添加更多的组件，一层一层地嵌套。在这里，我都是在用路由router来连接一个又一个的组件。而其实如果某个组件只有一个button一类的情况，用这种办法实在是没有必要。基本上，这种办法就适合架设比较大的一些页面：
例如：我学Vue的目的是为了架设一个个人网站，我大概有主页，博客页，项目页，关于页，简历页等等，这些大页面毫无疑问是需要用这种路由来假设的。假如在我的项目页里，只有四五个项目，每一个项目都是那种占满整个网页的图表，那么我就可以在项目页里，再开4-5个路由单独指向每一个项目。其余的应该没有必要，直接在Vue中添加组件就行。
下面的部分，就是有关于如何在Vue中直接Import组件。
3 直接Import组件
我们继续，鉴于我是想要写一个个人网站，现在我假设想要添加五个页面：主页，博客目录页，项目展示页，用户注册登录页，简历页，关于页。
虽然只有六个页面，但是要想做好，要想的东西挺多的，因为vue不像是php，不能写了一半页面了，才开始想下一半页面该怎么做，而是一开始就要想清楚，每一个页面的架构是怎样的，甚至于，每一个图表，每一个按钮最终会放在哪一个组件中？用写文章来类比，原本用php写网页，就像是写流水账一样，写到中间下半部再怎么设计结尾都可以。但是用vue，就必须要先规定死，这篇文章，开头是哪一个组件？中间是哪一个组件？结尾是哪一个组件？某一些更细的组件(例如一列排比句)应该放在中间组件的哪一个部位等等。在这里写文档，我就先不这么认认真真地设计思考了，先尽快搭出框架来。
4 引用一些CSS模板
到现在要开始做页面了，如果纯靠手来code整个页面，实在是太累了，所以可以使用一些现成的页面组件。这里写的组件或者模板，和前文写的组件完全不是一个意思啊！这里的组件的意思是，Bootstrap，Element，iView一类的东西。打开一看就懂了，都是一些已经写得很漂亮很漂亮的网页组件代码片段，只用引用相关的CSS文件和JavaScript文件就能用。
有关于Vue的这类组件，似乎TalkingData的iView和饿了吗的Element做的最好。具体谁更好，我也不知道……随便抓了(Element)用起来，反正都没用过，有这方面经验的同学可以告诉我。
首先打开CMD或者CMDer，在项目根文件夹下，输入：
npm install element-ui -save
这样的话Element组件就被安装到了Project里，打开main.js文件，在其中加入：
import Vue from 'vue'
import ElementUI from 'element-ui' //New Added
import 'element-ui/lib/theme-chalk/index.css' //New Added
import App from './App'
import router from './router'
Vue.config.productionTip = false
Vue.use(ElementUI) //New Added
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
这样我们就可以在整个项目都是用这一套组件了。
5 写出导航条
首先我们要写一个导航条，应该写在哪里呢？其实写在HelloWorld.vue或者App.vue中严格来说都可以，但是如果写在HelloWorld.vue中，以后添加Home， Register， Document， About等等页面，你都需要添加一次。所以还是写在App.vue中比较合适。
我们先在components文件夹中新建一个AppComponents的文件夹，专门用来放置被直接加载到App.vue中的组件，然后在其中添加一个Navbar.vue文件，我们要在其中添加导航条。
直接打开Element的页面开始抄袭。把整个导航条复制到我们Navbar.vue文件中。要稍微做一些调整，比如添加<template>。具体的文件如下：
<template>
<el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect"
background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" router>
<el-menu-item index="/">Home</el-menu-item>
<el-menu-item index="WebSocket">Melsec</el-menu-item>
<el-submenu index="3">
<template slot="title">Projects</template>
<el-menu-item index="3-1">Shiny</el-menu-item>
<el-menu-item index="3-2">LearnVue</el-menu-item>
<el-menu-item index="3-3">OtherProject</el-menu-item>
</el-submenu>
<el-menu-item index="4">Login</el-menu-item>
<el-menu-item index="5">Resume</el-menu-item>
<el-menu-item index="abouts">About</el-menu-item>
</el-menu>
</template>
<script>
export default {
data () {
return {
}
},
//注意这里我是将它的改为这样的，效果是一样的，但使用这个可以在页面任何部位设置跳转时头部导航条部分样式会跟这变化即为选中，而不是不变的例如：你设置跳转到产品页导航条的样式也会跟着选中产品项
computed:{
activeIndex(){
return this.$route.path.replace('/','')
}
},
methods: {
handleSelect(key, keyPath) {
console.log(this);
console.log(key,keyPath);
}
}
}
</script>
此时index.js内容如下：
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import WebSocket from '@/components/WebSocket'
import Abouts from '@/components/AppComponents/Abouts.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/WebSocket',
name: 'WebSocket',
component: WebSocket
},
{
path: '/abouts',
name: 'abouts',
component: Abouts
}
]
})
此时，可以发现，el-menu中加入了属性：router，el-menu-item中的 index 的值与 index.js 中的组件 path 是相同的，导航栏的跳转既是如此。
然后，直接修改App.vue(因为导航条是要被放在App.vue里，这样所有的页面都能看到，而不用重新在每一个页面都重写)。改成这样：
<template>
<div id="app">
<mynavbar/>
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
import mynavbar from './components/AppComponents/Navbar.vue'
export default {
name: 'App',
components: {
mynavbar
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 0px;
}
</style>
简单来说就是三步：
import 那个组件。
添加到mynavbar到export中。
在div最上方写：<mynavbar/>，(修改一下下边的Style里边的那个margin-top为0px.)
然后我们再打开http://localhost:8080，就已经变成了：
在这里插入图片描述
通过这种办法，我们只需要两步，就可以将一个组件添加到某一个大组件上，而不需要像之前一样很麻烦地调用路由。
以后我们的页面基本上都是一堆组件的堆砌。用这种办法，我们就可以耐心地一点一点把巨大的页面架构起来。这种办法，比起曾经的PHP确实麻烦许多，但是如果项目大了，项目分离就很容易，每个人只需要负责一个组件就行了，完事儿了汇总在一起，就是一堆module的import。这就是使用Vue的目的。
OK，通过这种办法，构建页面，转换路由已经没有问题了，下面还剩下的问题大概有：
组件间通信，比如，目前的导航条，默认选择是Home，如果我换到了其他的网址，如何自动调整Navbar。
九 npm run命令
1、ERR引发的思考
创建好的 vue 项目直接执行 vue run dev 报错？运行 vue run serve 就可以启动…如下
npm run dev
npm ERR! missing script: dev
npm ERR! A complete log of this run can be found in:
npm ERR! E:\nodejs\node_cache\_logs\2018-12-12T15_06_08_674Z-debug.log
2、dev build serve?
其实npm run dev或者是npm run serve等npm run xxx并不是一定要这么写。
npm run XXX是执行配置在package.json中的脚本，比如：
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
npm run xxx 中的 xxx 可以理解为键值对的 key，实际上 run 的是在 package.json 里面 scripts 配置的 value；
比如，npm run serve 实际运行的是：vue-cli-service serve；
而放在 3.0 以前运行的则是：node build/dev-server.js文件；
这时候我们再来看上边的问题是不是豁然了呢， scripts 中并没有配置 dev ，所以控制台报了 [ missing script: dev ] 的错误 ；
3、总结
npm run xxx，并不是你想运行就运行的，只有在package.json scripts 配置了，你才能 run 的，所以不是所有的项目都能 npm run dev/build。
要了解这些命令做了什么，就要去scripts中看具体执行的是什么代码。
这里就像是一些命令的快捷方式，免去每次都要输入很长的的命令(比如 serve 那行)
一般项目都会有 build， dev， unit 等，所以起名，最起码要从名字上基本能看出来是干什么的。
十 使用npm run build命令打包项目
1 项目打包
当我们使用vue-cli脚手架完成一个项目的时候，下一步肯定会想要怎么把这个项目放到互联网上或者本地直接打开呢，我们在本地调试的时候只要命令行执行npm run dev就可以把这个项目跑起来，但是现在我们要把他放到服务器上的话，用npm run build命令就可以啦。
运行npm run build之后，会生成一个dist文件夹，里面的目录结构大概是这样的：
在这里插入图片描述
生成完的文件我们怎么来运行呢？直接在本地打开inde.html是无法运行的，打包的时候有提示：
在这里插入图片描述
构建文件应该通过HTTP服务器提供服务。
所以我们要启动一个HTTP服务器才能够运行。选择一个HTTP服务器，可以直接使用Apache Tomcat和Nginx运行。
2 npm run build发生了什么？
npm run build命令的时候，首先package.json会将其解析为node build/build.js，执行这个目录，我们看看这个目录是什么！
3 代开
可以像打开静态网页一样打开项目，下图为打包生成的dist文件夹，其中index.html为入口文件：
在这里插入图片描述
没错，这时你打开了index.html文件，发现网页一片空白，打开F12发现console报了几个错误，状态码为404：
在这里插入图片描述
这是因为引用资源的路径问题，我们只要在下图的地方修改一下再打包就可以了。
需要修改的文件在项目目录下的config文件夹里的index.js文件中。
在这里插入图片描述
改完，再次执行npm run build，然后打开index.html发现sucess。
十一 vue项目使用websocket技术
1 WebSocket 是什么？
WebSocket 是一种网络通信协议。而且是在 HTML5 才开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
2 为什么需要 WebSocket ？
了解计算机网络协议的人，应该都知道：HTTP 协议是一种无状态的、无连接的、单向的应用层协议。
HTTP的弊端：无法实现服务器主动向客户端发起消息，它不支持持久连接的。
在websocket之前，传统的实现长轮询方法主要有： http long poll 或者ajax轮询。但轮询的效率低，非常浪费资源(因为必须不停连接，或者 HTTP 连接始终打开)。
因此，一种新的通信协议应运而生—websocket，他最大的特点就是服务端可以主动向客户端推送消息，客户端也可以主动向服务端发送消息，实现了真正的平等。
在这里插入图片描述
websocket其他特点如下：
(1）建立在 TCP 协议之上，服务器端的实现比较容易。
(2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
(3）数据格式比较轻量，性能开销小，通信高效。
(4）可以发送文本，也可以发送二进制数据。
(5）没有同源限制，客户端可以与任意服务器通信。
(6）协议标识符是ws(如果加密，则为wss），服务器网址就是 URL。
3 如何配置 WebSocket ？
本篇主要讲解客户端的配置。而且没有必要为 WebSockets 使用 JavaScript 库。
实现 WebSockets 的 Web 浏览器将通过 WebSockets 对象公开所有必需的客户端功能(主要指支持 Html5 的浏览器)。
以下 API 用于创建 WebSocket 对象。
var Socket = new WebSocket(url, [protocol]);
1
以上代码中的第一个参数 url，指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。
具体配置代码如下：
<template>
<div>
<button @click="send">发消息</button>
</div>
</template>
<script>
export default {
data () {
return {
path:"ws://192.168.0.200:8005/qrCodePage/ID=1/refreshTime=5",
socket:""
}
},
mounted () {
// 初始化
this.init()
},
methods: {
init: function () {
if(typeof(WebSocket) === "undefined"){
alert("您的浏览器不支持socket")
}else{
// 实例化socket
this.socket = new WebSocket(this.path)
// 监听socket连接
this.socket.onopen = this.open
// 监听socket错误信息
this.socket.onerror = this.error
// 监听socket消息
this.socket.onmessage = this.getMessage
}
},
open: function () {
console.log("socket连接成功")
},
error: function () {
console.log("连接错误")
},
getMessage: function (msg) {
console.log(msg.data)
},
send: function () {
this.socket.send(params)
},
close: function () {
console.log("socket已经关闭")
}
},
destroyed () {
// 销毁监听
this.socket.onclose = this.close
}
}
</script>
<style>
</style>
十二 问题
1 ‘webpack-dev-server’ 不是内部或外部命令，也不是可运行的程序
命令：npm install webpack-dev-server --save-dev；
2 npm安装模块遇到ENOENT: no such file or directory, rename错误
照Github上面的一个老外的说法：
Besides deleting package-lock.json the other workaround here is to upgrade to node-sqlite3@4.0.2
大意就是把其他地方的package-lock.json删了。
3 vue与vue-cli
vue是框架名称，vue也是vue-cli在终端里面的命令；
vue-cli是vue框架开发的快速工程化命令工具；
@vue/cli是vue-cli的最新的npmjs的包的名称。
来源：https://blog.csdn.net/essity/article/details/103140494
