前端系列：Vue.js安装与创建默认项目（详细步骤）

---

Vue.js安装与创建默认项目（详细步骤）

前言

上一篇博文已经对Node.js的安装与配置进行了详细介绍，详见https://blog.csdn.net/weixin_54626591/article/details/140079692

另外：文中项目存放的路径及项目名称可根据自身实际情况进行更改。

一、Vue.js简述

Vue是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。

二、搭建Vue脚手架

1. 直接用

直接下载并用<script>标签引入，Vue 会被注册为一个全局变量。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2. 通过NPM安装Vue

在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

2.1 安装Vue脚手架

在Cmd命令行窗口中输入如下命令安装Vue脚手架。

npm install @vue/cli -g

或者

cnpm install @vue/cli -g

当然前提是已安装配置了npm或者cnpm，如未安装可见博文：Node.js安装与配置（详细步骤）

执行cnpm install @vue/cli -g后如下图所示：

2.2 查看安装的Vue版本

cmd命令行窗口输入vue -V查看@vue/cli是否安装成功

vue -V

如下图所示，vue脚手架即安装成功

三、安装webpack及webpack-cli

1.安装webpack

由于webpack5及以上的版本变动较大，所以如果是采用vue3创建vue项目，用webpack4的版本更能互相的兼容。此处安装webpack@4.42.0版本，命令如下：

cnpm install webpack@4.42.0 -g

安装成功后，cmd命令行窗口如下图所示

2.安装webpack-cli

另外：由于webpack的版本需要webpack-cli一起配合使用，执行如下命令安装webpack-cli：

cnpm install webpack-cli -g

安装成功后，cmd命令行窗口如下图所示：

3.检查是否安装成功

cmd命令行窗口输入如下命令：

webpack -v

如下图所示，webpack和webpack-cli已经安装成功。

四、新建一个默认的Vue项目

1.创建项目

首先进入【E:\codes\web】路径下（此处创建在E:\codes\web下，请根据自身实际情况更改），然后进入此文件夹的cmd命令行窗口

执行如下命令创建一个名为【hello-vue】的Vue项目：

vue create hello-vue

点击回车后，会自动下载所需文件（包括node_modules），创建成功后如下图所示：

2.启动项目

首先进入【E:\codes\web\hello-vue】文件夹，然后进入此文件夹的cmd命令行窗口

执行如下指令运行该项目：

npm run serve

如上图项目启动成功，在浏览器打开http://localhost:8080/进行访问，效果如下图所示：

五、 底下评论

1. 输入npm run serve然后报错 npm ERR!Miss script：“serve”

A：
看一下项目的package.json文件的scripts是不是有serve这个script：

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build"
},

Q：有这个会怎样？

A：npm run serve启动项目，npm run build打包项目。没有package.json文件的scripts的话，就会报错：Miss script: "xxx"

2. 安装webpack-cli命令：cnpm install webpack-cli@4.9.2 -g

Q：感谢，要是没加@4.9.2，查看webpack版本时就显示“System…”了

Q：这个是对的

3. 求助在npm install @vue/cli -g时报错是为啥

A：报什么错呢

Q：Not Found,404，就是一直报错，两个都报错

4. 2.1我用npm不成功，用cnpm就好了。

5. 感谢大佬，如果在装完vue后 vue -V 没反应，可以试试重启cmd康康

Q：这个确实是这样，重启就好了！

6. 为啥我安装webpack之后输入webpack -v出现Error:Command failed:wmic os get Caption错误表情包

Q：解决了，安装webpack-cli的时候没有写版本号表情包

7. 求助大佬，请问webpack -v 没有显示版本信息，显示System: 是什么情况

Q：你好，这个问题解决了吗？我现在也是这样表情包

Q：安装webpack-cli命令：

cnpm install webpack-cli@4.9.2 -g

楼下提供的，用这个安装命令安装后，再查看webpack -v就有webpack的信息了

Q：

cnpm install webpack-cli -g

这条命令默认会安装最新版本的,webpack版本5是不适用这条命令的,
npm info webpack version要输入这个查看,
cnpm install webpack-cli@4.9.2 -g 换成webpack4 的版本,就可以查看webpack信息,不是电脑配置了

Q：这个是对的，我按照安装的是好的

Q：那我需要把之前下载的版本五卸载了吗

Q：感谢大佬

写在最后

---

liyitongxue

Vue.js安装与创建默认项目（详细步骤）