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项目。
初始化项目
-
首选进入到你的项目存档目录中:
cd /Users/XXXXXXX/PycharmProject
-
开始创建一个vue项目,使用命令:
vue init webpack vue-demo
,此命令含义是初始化 一个以webpack
为模板的名叫vue-demo
的项目-
首先会问你项目名称,直接回车,因为我们命令行已经写过了项目名称(这里可以修改)
-
项目描述,直接回车
-
作者名称,直接回车
-
这里是问你,需要不需要安装编译器,我们选择需要安装,选择第一个,回车
-
这里是问需不需要安装vue-router,我们输入Y(不安装router怎么玩spa单页应用呢)
-
是否需要使用
ESLint
来检查你的代码,需要 -
然后问你需要使用哪种风格来检查你的代码,我们选择第一个
Standard
来检查代码 -
是否需要安装测试功能,不要,我们输入 n 然后回车
-
还是关于测试的内容,我们还是输出 n 然后回车
-
之后等待一段时间即可,可以看到会输出一些警告,我们选择不管
-
-
终端输入:
cd vue-demo
-
接着:
npm run dev
-
浏览器打开http://localhost:8080
结语
-
至此,一个最基本的vue项目搭建已经完毕。我们首先安装了nodejs这个环境,然后使用了npm安装了vue-cli脚手架,最后使用了vue init 命令一步步生成了一个vue项目
-
下个系列,我会详细介绍项目里每个文件夹、每个文件的作用