vue前端框架的安装以及项目创建教程（包括控制台创建和UI创建）

我在今年年初创建一个网站项目，当时学习做前端开发，学习了vue。vue是一个前端框架，使用vue之后，会让前端项目的开发更方便。

目前主流的前端框架有React、Vue、Angular，其中React是Meta公司（Facebook）2013年创建，Angular是Google公司2010年创建，Vue最开始是开发者尤雨溪2014年创建的个人项目，但是Vue后来居上，易学易用开发快捷，使其成为了主流的前端框架之一。

接下来，主要以Windows系统为安装环境，讲解node.js的安装、vue安装、vue项目的创建，以及vue项目中各个文件的意义。

node.js的安装

在安装vue之前，我们需要先安装node.js，这个是JavaScript运行时，这个程序负责解析js代码，并将js代码执行。vue依赖于node.js环境。我们首先安装node.js。

登录node.js官网的下载区，https://nodejs.org/zh-cn/download，打开后如下图：

选择LTS长期支持的版本，然后选择对应的操作系统，注意，后面的包管理工具选择npm，npm可以方便地进行包管理，包括安装包删除包之类的操作。

我们将node.js的安装包下载完毕之后，进行安装，按照安装向导提示，选择下一步即可完成安装。有关安装目录的位置，我通常安装在D盘。安装完成后，我们需要在命令提示行里面输入 node -v 和 npm -v，如果正确地打印出了这两个工具的版本号，那么恭喜，安装成功，效果如下图：

这样，这两个工具就可以使用了。npm的镜像源需要重新设置一下，我们需要将npm镜像源设置成国内淘宝的镜像地址，这样我们下载包的时候速度更快一些，操作方法是：

npm config set registry https://registry.npm.taobao.org

通过下面命令查询是否设置成功：

npm config get registry

如果显示的是淘宝镜像源的地址，那么就设置成功了。关于npm镜像源的其他设置可以参考这篇文章：npm镜像源设置

vue的安装

打开命令提示窗口，输入：

npm install -g @vue/cli

即可完成vue的安装。其中：

• npm install：是npm安装包的命令。
• -g： 参数表示全局安装，安装后可以在任何地方使用 vue 命令。
• @vue：是 Vue 的命名空间，通常由 Vue 团队发布和管理的所有工具和库都会包含这个前缀。
• cli：是你要安装的具体包名称，表示 Vue 的命令行工具。

安装的时候可以指定安装版本，npm install -g @vue/cli@[version]，像我们这样使用npm install -g @vue/cli，默认会安装最稳定的包，等同于npm install -g @vue/cli@latest。如果我们想安装4.5.0这个版本，可以输入npm install -g @vue/cli@4.5.0，这样就会安装4.5.0，安装其他的npm包也是如此。

安装结束后，我们接下来在命令提示窗输入vue --version，如果正确打印版本号，那么就代表成功了。如图：

vue项目的创建

使用vue创建项目有两种方式：命令行方式和UI界面方式。

第一种命令行方式：

这种方式简单说说：首先进入到存放项目的目录，在此目录打开cmd，输入：

vue create my-vue-app

my-vue-app是要创建项目的名称。这时会让我们选择创建项目的模版或是手动创建，如图：

我们通过键盘上下箭头，选择最后一项手动，然后回车，进入到下一个界面：

这时界面让我们选择一些插件工具，我们可以通过上下按键移动到我们需要的工具的位置，点击空格键来选择或取消选择。中间有一些工具的设置，有关于这些工具，接下来将在UI界面创建的时候详细讲解。接下来选择版本，我们选择3.x，回车。

最后，这个位置是询问是否将上面的一些设置保存成模版，这里我们选N，不保存。之后就开始创建，如下图：

最后创建成功。我们在本地项目磁盘目录里就看到了my-vue-app这个文件夹。

第二种UI创建方式：

接下来我们重点看一下UI创建，UI创建更直观，但其实里面的项目配置选项和控制台创建是一样的。我们重点讲解一下里面各个选项的作用。
首先还是在控制台，我们输入 vue ui，这时会弹出一个网页，如下图：

我们选择创建项目，到下一个界面：

接下来我们在这个页面，给项目起一个名字，我这里起的是my-vue-app-ui，包管理器选择npm，git初始化部分我个人的选择是否，然后下一步：

这里我选择手动配置，不使用预设或之前保存的模版。下一步：

在这里我们选择安装的插件，如果都不选的话，我们也可以在项目里面通过npm install来安装对应的插件。这里有几个插件要说一下：

• Babel我们要选择，这个会将新版的js语法转换成老版本的js语法，目的是有的老的浏览器不支持新版本的js语法，所以这样做我们的项目可以兼容老的浏览器。
• Router我们要选择，这个是路由的插件。
• Vuex插件是vue项目中负责全局数据管理的，如果项目有需要全局数据管理，我们可以选择。
• CSS Pre-processors，这个是css代码的预处理器，我们安装这个后，写css代码的时候更方便，例如使用sass或less处理器，css写样式可以支持嵌套等写起来方便的特性。在这里我选择勾选。
• Linter/Formatter，在这里我一般不勾选这一项。Linter 是一个代码检查工具，它的主要作用是分析代码中的潜在问题，并指出代码风格的错误、潜在的 bug、语法问题。选这一项后，构建项目如果出现语法不严格等问题的时候，项目就会报错。我使用这个选项的时候，开发项目时嘴里经常起泡，所以这一项我个人的偏好是不选择。

其他的选项可以先不用管，可以根据项目的需要，随时安装即可。下一步，来到最后一步设置：

第一个是vue版本，我们选择3.x。
第二个是路由模式，我们选择历史路由，所以这个选项需要勾选。如果不选择历史路由，那么就是hash路由，我们项目中，路由的前面会有“#”这个符号。我开发网站的考虑有井号不太符合我项目显示的需要，感觉不太专业，不利于网站日后的seo优化，所以这个位置我毅然决选择了历史路由。
第三个是选择css的预处理器，我选择sass/scss，当然也可以选择less。我最开始使用的是less，后来转成scss，这两个明显的区别我还没有感觉出来。配置完成我们选择创建项目，接下来显示下图界面：

提示我们是否将刚才的设置保存成模版，按照自己的习惯选择即可，这里我选择不保存。最后创建项目完成。

vue项目中各个文件的意义：

项目创建好了之后，我们查看文件夹查看下各个文件：

• node_modules目录：用途是存放项目依赖的第三方库和模块。当你运行 npm install 时，这些依赖会被安装到此文件夹中。这个文件夹通常不会被提交到版本控制中。所以我们保存源代码的时候，通常不会保存这个目录，通过npm install，可以重建这个目录。
• public目录：用途是存放公共资源，如图像、字体和 HTML 文件等。public 目录下的文件不会被 Webpack 处理，它们会原封不动地被拷贝到构建输出目录。常见文件：index.html：这是单页应用（SPA）的 HTML 模板。Vue 项目中的整个应用会渲染到该页面的一个元素（通常是一个）。其他可能的资源：例如 favicon、图像、外部字体等。
• package.json文件：用途是包含项目信息、项目依赖、脚本命令等。重要字段有：dependencies：项目运行时需要的依赖。
  devDependencies：项目开发时需要的依赖（如 Webpack、Babel 等）。
  scripts：定义了可以在命令行运行的脚本（如 npm run serve 用于启动开发服务器，npm run build 用于构建生产版本）。
• vue.config.js（可选）：用途是Vue CLI 配置文件。用于定制和扩展 Vue CLI 默认配置。例如，你可以在这里配置 Webpack、开发服务器、代理等。常见配置：
  修改 Webpack 配置。
  配置开发服务器（如代理 API 请求）。
  配置静态资源路径等。
• .gitignore文件：用途是Git 忽略文件，指定哪些文件和文件夹不应该被 Git 版本控制。通常会将 node_modules/ 和构建文件夹（如 dist/）添加到此文件中。
• dist目录（构建输出目录）：这是运行 npm run build 时生成的生产环境代码的文件夹。它包含了经过优化和压缩的代码，用于部署到生产环境。
• src目录（重要）：存放源代码的目录它是 Vue 项目中开发的核心区域。所有的组件、视图和业务逻辑都会在这里进行组织。

src目录中常见子文件夹与文件：

• assets/：用于存放静态资源，如图片、样式表、字体等，这些资源会经过 Webpack 的处理。
• components/：存放 Vue 组件的地方。Vue 组件是构建 Vue 应用的基础，通常会拆分成多个小的组件，以提高可维护性和重用性。
• views/：存放视图组件的地方。一般来说，视图组件对应着应用中的不同页面（例如主页、关于页面等）。如果你使用 Vue Router 路由来管理页面，那么每个视图通常会被映射到一个路由。
• router/：存放 Vue Router 路由配置的文件。路由定义了 URL 路径和组件的映射关系，使得页面可以根据 URL 动态加载。
• index.js：默认的路由配置文件，用于定义应用的所有路由规则。
• store/：存放 Vuex 状态管理的相关文件。Vuex 是 Vue 的官方状态管理库，用于跨组件共享和管理状态（例如，用户信息、应用配置等）。
• index.js：默认的 Vuex 配置文件，用于管理全局状态、mutations、actions 等。
• App.vue：这是 Vue 应用的根组件。所有其他组件都会被挂载到这个组件的模板中。
• main.js：这是应用的入口文件，通常包含了 Vue 实例的创建以及全局配置，比如挂载根组件（App.vue）到 #app DOM 元素中。在这里，你还可能会引入全局样式、插件和其他库。

运行工程：

在vscode中打开vue项目后，我们需要打开集成终端：

在终端中输入命令：npm run serve， 结果如下图所示：

这样，我们的项目就运行了，点击终端下面App running at中的链接，就可以看到我们项目的效果了。