全栈的自我修养: 环境搭建
Not all those who wander are lost.
彷徨者并非都迷失方向。
Table of Contents
@
- 前言
-
环境准备
- nodejs
- vue-cli
-
创建 Vue 项目
- yarn和npm 命令 对照表
- 项目结构
- 使用 elementUI
- 配置 Vuex
- 配置 axios
- github
- 参考
当你看到这篇文章的时候,暂且认为你对如何做一个网站有了兴趣.
前言
本系列文章将从一个完整的项目是如何开发的过程进行编写,期间会涉及前端、后端和一些运维的知识。
本篇题为 全栈的自我修养
将通过一个项目整合(一前端项目对应三个后端项目
),完成一个简单的DEMO
其中前端项目使用 Vue.js
,这个项目将会用到vue
,vuex
,vue-route
,axios
,elementUI
等
后端项目使用为 3 个项目,其中涉及Spring Boot, Mybaits, Flask
等
中间会穿插一些运维的知识如常用linux命令, Jenkins
等
也会介绍一些工具的使用
计划分为以下几个项目:
- epimetheus-frontend 面向用户的PC前端项目
- epimetheus-management-frontend 面向运营人员的内部管理系统前端项目
- epimetheus-miniapp-frontend 小程序前端项目
- epimetheus-backend 对应后端
- epimetheus-management-backend 对应后端
- epimetheus-miniapp-backend 对应后端
环境准备
作为第一篇,这里主要介绍Vue
环境的准备工作.
nodejs
根据实际情况下载对应版本即可
官网地址:https://nodejs.org/zh-cn/download/
安装完成后,在控制台中输入:node -v
即可得知安装的node
版本,使用 npm -v
查看 npm
版本
node -v
v14.4.0
npm -v
6.14.5
vue-cli
如果上面已经验证正确安装了 node
和 npm
, 则使用 npm install -g vue-cli
完成 vue-cli
的安装
创建 Vue 项目
给项目起名字一直是困扰我的第一个难题,本次将项目暂命名为 epimetheus-frontend
使用 vue-cli
命令生成项目,命令格式为:vue init webpack Vue-Project
, 这里为 vue init webpack epimetheus-frontend
,
- 首先找个存在代码的文件夹,这里先创建一个
epimetheus
文件夹 - 进入
epimetheus
文件夹 - 执行
vue init webpack epimetheus-frontend
根据提示填写项目信息:
? Project name epimetheus-frontend
? Project description A Vue.js project
? Author yunan.zhang
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) yarn
注意上面选择了 yarn
而不是 npm
, 这里对于使用 npm 还是 yarn, 并没有要求,两个的功能都能使用,只是命令略有不同而已
yarn和npm 命令 对照表
npm | yarn |
---|---|
npm install | yarn install |
(N/A) | yarn install --flat |
(N/A) | yarn install --har |
(N/A) | yarn install --no-lockfile |
(N/A) | yarn install --pure-lockfile |
npm install [package] | (N/A) |
npm install --save [package] | yarn add [package] |
npm install --save-dev [package] | yarn add [package] [--dev/-D] |
(N/A) | yarn add [package] [--peer/-P] |
npm install --save-optional [package] | yarn add [package] [--optional/-O] |
npm install --save-exact [package] | yarn add [package] [--exact/-E] |
(N/A) | yarn add [package] [--tilde/-T] |
npm install --global [package] | yarn global add [package] |
npm rebuild | yarn install --force |
npm uninstall [package] | (N/A) |
npm uninstall --save [package] | yarn remove [package] |
npm uninstall --save-dev [package] | yarn remove [package] |
npm uninstall --save-optional [package] | yarn remove [package] |
npm cache clean | yarn cache clean |
rm -rf node_modules && npm install | yarn upgrade |
安装过程可能有点慢,安装完成后,如下
# Project initialization finished!
# ========================
To get started:
cd epimetheus-frontend
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
这时,我们可以进入 epimetheus-frontend
, 并在控制台运行 npm run dev
,即可开始运行我们的项目
epimetheus$ cd epimetheus-frontend
epimetheus/epimetheus-frontend$ npm run dev
> epimetheus-frontend@1.0.0 dev /Users/zhangyunan/project/scoding/epimetheus/epimetheus-frontend
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
13% building modules 29/31 modules 2 active ...theus/epimetheus-frontend/src/App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
95% emitting
DONE Compiled successfully in 2886ms 下午1:49:57
I Your application is running here: http://localhost:8080
从控制台信息可以看出,访问路径为:http://localhost:8080
这样准备工作基本就完成了
项目结构
这里使用 VSCode
进行开发,你也可以使用 Webstorm
, 两个都可以,在使用VSCode
的时候,可以直接在终端使用 code
命令在VSCode打开执行文件或者目录,
例如:
epimetheus/epimetheus-frontend$ code .
则会将当前文件夹 epimetheus/epimetheus-frontend
在 VSCode
中打开,
如何你安装
VSCode
后,使用code
命令时,提示 not fund, 可以通过 查看 -> 命令面板 输入code
进行安装
这里使用了 VSCode
,打开项目后如图:
├── build/ # webpack config files
│ └── ...
├── config/
│ ├── index.js # main project config
│ └── ...
├── src/
│ ├── main.js # app entry file
│ ├── App.vue # main app component
│ ├── components/ # ui components
│ │ └── ...
│ └── assets/ # module assets (processed by webpack)
│ └── ...
├── static/ # pure static assets (directly copied)
├── .babelrc # babel config
├── .editorconfig # indentation, spaces/tabs and similar settings for your editor
├── .eslintrc.js # eslint config
├── .eslintignore # eslint ignore rules
├── .gitignore # sensible defaults for gitignore
├── .postcs-s-rc.js # postcss config
├── index.html # index.html template
├── package.json # build scripts and dependencies
└── README.md # Default README file
其中,我们主要修改 src 下文件,上面提到项目访问端口为:8080
, 为了防止与其他项目造成冲突,这里将端口改为:7000
, 具体配置在 config/index.js
文件中
使用 elementUI
这里使用了
官网:http://element-cn.eleme.io/#/zh-CN/component/installation
这里我们进入刚才的项目目录:并执行 yarn add element-ui
epimetheus/epimetheus-frontend$ yarn add element-ui
yarn add v1.15.2
[1/5]