上篇文章： Vue】Vue扫盲（六）关于 Vue 项目运行以及文件关系和关联的详细介绍
文章目录
-
- [一、安装 相关工具](#一、安装 相关工具)
- 二、处理相关问题
-
- [问题一：vue -v 提示 'vue'不是内部或外部命令，也不是可运行的程序或批处理文件。](#问题一：vue -v 提示 'vue'不是内部或外部命令，也不是可运行的程序或批处理文件。)
- 问题二：提示下载webpack失败，连接超时
在日常开发中，我们很少自己建立起项目结构，一般都是通过构建工具建立起大致的结构，在基础上再进行开发，今天介绍一下，如何使用Vue脚手架进行开发：
前提：这里是默认已经安装好node.js环境和npm环境了。
一、安装 相关工具
1、我们先全局安装上webpack(自动化项目构建工具)打包工具；
powershell
npm install webpack -g2.全局安装 vue 脚手架
powershell
npm install -g @vue/cli-init3.初始化 vue 项目；
vue init webpack appname： vue 脚手架使用 webpack 模板初始化一个 appname 项目
如果顺利的话，直接每一步骤都成功；那我们就能进行相关的开发了。
但是我在此过程中遇到了一些问题：
二、处理相关问题
问题一：vue -v 提示 'vue'不是内部或外部命令，也不是可运行的程序或批处理文件。
执行完毕之后，想看一下Vue的版版本，vue -v 提示 'vue'不是内部或外部命令
检查：
1、确定npm是否已正确安装？
2、确定vue以及vue-cli已正确安装？
3、确定vue.cmd已经加入到环境变量中？
如此见得，vue应该是还没有配置到环境变量path中；
解决方法
知道了原因，解决起来就容易多了，具体操作步骤如下：
1、确定npm是否已正确安装，在cmd中输入如下指令：
powershell
C:\Users\xiesj> npm -v从上图可以清楚的看到，我已经安装过了
2、输入 npm config list 查看目录，
找到 prefix 目录下对应的地址
3、然后在该目录看是否有Vue的相关执行文件。
如果看不到该指令，则回到cmd命令窗口控制台，执行如下命令来安装vue：
powershell
C:\Users\xiesj> npm install -g vue然后，再输入以下命令来安装vue-cli：
powershell
// 卸载
npm uninstall -g vue-cli
// 安装
npm install -g @vue/cli
// 或者
cnpm install -g @vue/cli 
已经安装了vue，就能看到。
如果有的话执行
powershell
vue --version
vue -V
vue-cli --version如果没有问题，问题出在没有配置 npm 全局下载的包添加到环境变量中
在"控制面板"里面找到"系统和安全"，接着在"系统和安全"找到"系统"，找到系统界面后，在左边的侧边栏，找到"高级系统设置"，点击进入
找到系统环境变量中的Path，编辑，将global的路径添加进去。
然后再次执行 vue init webpack appname：vue命令找到了
但是又报了其他的错误：
问题二：提示下载webpack失败，连接超时
解决思路
1.提示下载webpack失败，那可能是创建项目的时候，需要这个包
2.但是提示下载webpack的时候，连接超时，那么这个资源可能不在国内，需要kexue上网；或者可能是我的网络环境不支持
检查一下网络：然后ping一下Github（因为该webpack资源来自Github） 使用telnet一下；
结果我这都是通的，但是就是不行，不知道为什么，索性换了一种方式----下载好webpack模版后，然后离线创建这个项目
找到原因啦：
这里是后期补充的内容，连接超时是因为去github下载webpack-template而很多公司屏蔽了github
vue-cli · Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT，所以采用了离线的方式
需要的小伙伴可以用现成的webpack：
链接：https://pan.baidu.com/s/1x1yXz-0uPSJAMdr9Yuqy0w
提取码：wdh5
下载好的模版需要放到当前用户的.vue-templates目录下，所以
在这个文件夹里面自己创建一个.vue-templates文件夹
并把webpack解压进去，因为处于C盘，所以可能无权限在里面直接解压，我们可以创建一个webpack文件夹，然后再别的盘解压后，再复制到此文件夹下即可。
如果配置的目录不对的话，会提示；
按照上面的步骤检查一下对了即可。
然后再再去创建一下离线项目试试
先先切换到要创建项目的目录，然后输入离线创建的命令 执行vue init webpack appname，构建项目，成功：
构建完毕
打开创建成功的项目，OK！
启动项目：
紧接着在cmd初始化的窗口中，进入到vue-demo的项目里面，执行npm run dev命令启动项目
访问路径，进入到Vue的一个欢迎页面；初始化结束。