Vue系列-搭建本地环境&初始化项目

Vue系列-搭建本地环境&初始化项目

开门见山，本系列是我个人学习Vue教程的一些总结，适合有一些编程基础的小白以及想要入门测试开发的测试人员。

名词解释

• Vue.js 即我们使用的vue框架，核心东西
• Vue-Router 是 Vue.js 官方的路由管理器，和 Vue.js 的核心深度集成，此系列中用来构建spa单页应用
• NodeJs 我们的前端开发环境
• npm 前端的包管理器(类似python的pip以及mac的brew)
• Axios ajax 接口请求工具(类似python的requests)
• Element UI Vue的常用UI库，类似还有iView UI、Ant Design Vue等
• vue-cli vue 项目脚手架。一键安装 vue 全家桶的工具(用此工具可以快速帮你生成一个vue框架)

环境准备

• 安装nodejs环境：brew install node，Windows用户请参考官方安装方式

• 安装完成后就可以使用npm命令了，npm 是 nodejs 的官方包管理器。可以简单的理解为，用这个来管理所有的依赖包，虽然不仅仅是如此

• 安装vue-cli：npm install -g vue-cli

• -g 是命令参数，代表，这个包将安装为系统全局的包。也就是说，在任何地方都可以用这个包

• 安装后在终端输入如下命令，若显示下方输出，则证明环境已经搭建完毕，接下来我们使用vue-cli脚手架创建一个vue项目。
  

初始化项目

1. 首选进入到你的项目存档目录中：cd /Users/XXXXXXX/PycharmProject

2. 开始创建一个vue项目，使用命令：vue init webpack vue-demo，此命令含义是初始化 一个以 webpack 为模板的名叫 vue-demo 的项目

   • 首先会问你项目名称，直接回车，因为我们命令行已经写过了项目名称(这里可以修改)

   • 项目描述，直接回车

   • 作者名称，直接回车

   • 这里是问你，需要不需要安装编译器，我们选择需要安装，选择第一个，回车

   • 这里是问需不需要安装vue-router，我们输入Y(不安装router怎么玩spa单页应用呢)

   • 是否需要使用 ESLint 来检查你的代码，需要

   • 然后问你需要使用哪种风格来检查你的代码，我们选择第一个 Standard 来检查代码

   • 是否需要安装测试功能，不要，我们输入 n 然后回车

   • 还是关于测试的内容，我们还是输出 n 然后回车

   • 之后等待一段时间即可，可以看到会输出一些警告，我们选择不管
     

3. 终端输入：cd vue-demo

4. 接着：npm run dev
   

5. 浏览器打开http://localhost:8080

   

结语

• 至此，一个最基本的vue项目搭建已经完毕。我们首先安装了nodejs这个环境，然后使用了npm安装了vue-cli脚手架，最后使用了vue init 命令一步步生成了一个vue项目

• 下个系列，我会详细介绍项目里每个文件夹、每个文件的作用