全栈的自我修养: 001环境搭建 (使用Vue,Spring Boot,Flask 完成Vue前后端分离开发)

2020-06-28 14:22:34 浏览数 (1)

全栈的自我修养: 环境搭建

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 等

也会介绍一些工具的使用

计划分为以下几个项目:

  1. epimetheus-frontend 面向用户的PC前端项目
  2. epimetheus-management-frontend 面向运营人员的内部管理系统前端项目
  3. epimetheus-miniapp-frontend 小程序前端项目
  4. epimetheus-backend 对应后端
  5. epimetheus-management-backend 对应后端
  6. epimetheus-miniapp-backend 对应后端

环境准备

作为第一篇，这里主要介绍Vue环境的准备工作.

nodejs

根据实际情况下载对应版本即可

官网地址：https://nodejs.org/zh-cn/download/

nodejsdownload.pngnodejsdownload.png

安装完成后，在控制台中输入：node -v 即可得知安装的node版本,使用 npm -v 查看 npm 版本

代码语言：txt复制
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,

  1. 首先找个存在代码的文件夹，这里先创建一个 epimetheus 文件夹
  2. 进入 epimetheus 文件夹
  3. 执行 vue init webpack epimetheus-frontend

根据提示填写项目信息：

代码语言：txt复制
? Project name epimetheus-frontend
? Project description A Vue.js project
? Author yunan.zhang <zhangyunan@91jinrong.com>
? 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

(N/A)

yarn add package

npm install --save-optional package

yarn add package

npm install --save-exact package

yarn add package

(N/A)

yarn add package

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

安装过程可能有点慢，安装完成后,如下

代码语言：txt复制
# 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,即可开始运行我们的项目

代码语言：txt复制
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

imageimage

这样准备工作基本就完成了

项目结构

这里使用 VSCode 进行开发，你也可以使用 Webstorm, 两个都可以，在使用VSCode 的时候，可以直接在终端使用 code 命令在VSCode打开执行文件或者目录，

例如：

代码语言：txt复制
epimetheus/epimetheus-frontend$  code .

则会将当前文件夹 epimetheus/epimetheus-frontend 在 VSCode 中打开，

如何你安装 VSCode 后，使用 code 命令时，提示 not fund, 可以通过 查看 -> 命令面板 输入 code 进行安装

vscode_install_code.pngvscode_install_code.png

这里使用了 VSCode,打开项目后如图：

front_project_struts.pngfront_project_struts.png
代码语言：txt复制
├── 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
├── .postcssrc.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 文件中

front_project_port.pngfront_project_port.png

使用 elementUI

这里使用了

官网：http://element-cn.eleme.io/#/zh-CN/component/installation

这里我们进入刚才的项目目录：并执行 yarn add element-ui

代码语言：txt复制
epimetheus/epimetheus-frontend$ yarn add element-ui
yarn add v1.15.2
[1/5] 


	


网站 npm javascript yarn node.js 




	






	

 0 人点赞