vue+element-ui初体验入门拥有自己的前台项目以及配置文件讲解（1）vue项目创建

阿丹：

        之前一直在写jsp页面，自从发现vue可以支持更好看更高级的页面效果之后开始研究一下。这篇文章，可以带领兄弟们简单的得到实现一个简易的自己vue项目。如果想部署服务器上，可以参考阿丹的部署vue的文章哈。

准备工作：

        编译工具：idea

vue简介：

        Vue是一个流行的JavaScript前端框架，它专注于构建单页面应用程序或具有互动性的用户界面。Vue的一个主要特点是其响应式数据绑定系统，它允许应用程序的数据模型自动响应用户操作。Vue还具有丰富的模板语法和可重用的组件库，使得开发人员可以轻松构建复杂的用户界面。此外，Vue也非常灵活，可以与其他库和框架集成，从而满足不同的需求。

开始拥有自己的vue项目

先在桌面创建一个空的文件夹一会用来存放我们的vue项目

 文件拖入idea（我们的编译工具）

点击Terminal(终端)

 在终端中输入指令来进行下载拥有自己的vue项目

输入指令来进行拉取

 vue init webpack 是一个命令行指令，用于初始化一个新的 Vue 项目。运行此命令将使用 Vue CLI，快速地创建一个新的 Vue 项目，使用 webpack 构建工具。它会创建一个基本的项目结构，包括 Vue 框架所需的各种配置文件、依赖项和示例代码，以及一个基本的项目模板。在创建项目后，可以开始使用 Vue 框架来开发您的应用程序，并针对具体需求进行自定义配置。

vue init webpack

 阿丹贴士：

        现在使用的是webpack来拉取的vue项目的模版，不同的vue模版的打包方式和指令会不同。要注意分辨！

1、开始步骤，   Generate project in current directory? 在当前目录中生成项目?

输入y

2、设置本项目的名字如果不输入则默认是文件夹的名字直接回车即可

3、Project description  （项目描述）

如果没有请直接回车即可 

 4、author作者默认是之前注册的邮箱用户（回车即可）

 5、选择两种vue build模式

这是在使用 Vue CLI 创建项目时选择构建模式的选项之一。Runtime + Compiler 模式会在应用程序运行时编译和解析模板，然后将其转换为虚拟DOM并挂载到应用程序中。这种模式适用于需要在应用程序中编写、编译和解析模板的场景（如使用 Vue 组件在应用程序中构建大型页面）。而 Runtime-only 模式则只包含运行时版本的 Vue ，不包含编译器。因此，只允许在 .vue 文件中写入模板，而在其他地方使用 render 函数来创建虚拟DOM。这种模式更适用于构建服务器端应用或小型移动应用程序，因为它可以减少构建的总体大小。

我们在这里选择第一种就可以。按回车进行确定。

 6、安装vue-router 我们的vue项目是需要router的（也就是路由）请输入y

7、Use ESLint to lint your code?使用ESLint来检测你的代码，我们这里暂时不需要输入n即可。

8、  Set up unit tests 设置单元测试 我们本次写的是一个简单的vue项目所以输入n即可

9、 Setup e2e tests with Nightwatch?

与Vue CLI创建的项目有关。Nightwatch是一个基于Node.js的自动化测试框架，可用于测试前端应用程序。通过安装和配置Nightwatch，可以使用它为您的Vue应用程序设置端到端（e2e）测试，在应用程序渲染到浏览器中之后模拟用户交互、点击事件、填写表单、断言应用程序的响应等等。通过运行这些测试，可以确保应用程序在各种场景下都表现出预期的行为，并最终提高应用程序的质量和稳定性。

后期如果需要我们可以使用但是我们这次不使用这个所以选择n

10、  Should we run `npm install` for you after the project has been created?

（我们应该在项目创建后为你运行' npm install '吗?）

这是在使用 Vue CLI 创建新项目时的选项之一，用于指定是否在创建项目后立即运行 npm install 命令（通常是为了安装项目所需的依赖项）。可以根据需要从三个选项中进行选择：

• Yes, use NPM ：使用 npm 自动安装依赖项。
• Yes, use Yarn ：使用 Yarn 自动安装依赖项。
• No, I will handle that myself ：不自动安装依赖项，而是让用户自己执行安装操作。如果已经手动安装了项目依赖项或者希望自己控制安装的过程，那么选择此选项可能会更加合适。

我们这里直接使用让他给我们安装npm即可所以选择第一个 

11、开始下载配置vue项目了

 12、 进行项目初始化

指令： 

npm install

 到现在为止我们基础的项目vue项目已经完毕。现在我们需要安装我们需要的组件。

首先是我们发送请求的组件使用axios,使用element-ui来进行vue组件的简单化。

下载axios组件

指令

npm install --save axios vue-axios

 还是在终端中输入指令

 下载element-ui组件

指令：

下载指定版本的element-ui在@后面进行指定版本 

npm install --save element-ui@2.15.12 -S

运行vue指令

方法1：在终端输入下面指令：

npm run dev

方法2：使用idea

1、

2、

 3、

 4、方框中本来什么都没有选中dev即可如果是选择build则是打包指令