热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

全栈的自我修养:环境搭建Notallthosewhowanderarelost.彷徨者并非都迷失方向。TableofContents@当你看到这篇文章的时候,暂且认为你对如何做一个

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

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.png

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

node -v
v14.4.0
npm -v
6.14.5

vue-cli

如果上面已经验证正确安装了 nodenpm, 则使用 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

根据提示填写项目信息:


? 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

image

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

项目结构

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

例如:

epimetheus/epimetheus-frontend$  code .

则会将当前文件夹 epimetheus/epimetheus-frontendVSCode 中打开,

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

vscode_install_code.png

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

front_project_struts.png

├── 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 文件中

front_project_port.png

使用 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] 

推荐阅读
  • 本文探讨了2019年前端技术的发展趋势,包括工具化、配置化和泛前端化等方面,并提供了详细的学习路线和职业规划建议。 ... [详细]
  • Spring Cloud学习指南:深入理解微服务架构
    本文介绍了微服务架构的基本概念及其在Spring Cloud中的实现。讨论了微服务架构的主要优势,如简化开发和维护、快速启动、灵活的技术栈选择以及按需扩展的能力。同时,也探讨了微服务架构面临的挑战,包括较高的运维要求、分布式系统的复杂性、接口调整的成本等问题。最后,文章提出了实施微服务时应遵循的设计原则。 ... [详细]
  • 在树莓派Ubuntu(ARM64)上安装Node.js
    本文详细介绍了如何在树莓派Ubuntu系统(ARM64架构)上安装Node.js,包括下载、解压、移动文件以及创建软链接等步骤。 ... [详细]
  • Vue 项目构建与部署指南
    本文将指导您完成Vue项目的构建和部署过程,包括环境搭建、项目初始化及配置、以及最终的部署步骤。 ... [详细]
  • 了解如何快速搭建属于自己的个人博客,无需编程基础,适合Mac和Windows用户。通过本文,您将学会使用GitHub Pages和Hexo构建一个完全自主的在线空间。 ... [详细]
  • 本文介绍了如何使用外向烧鹅IO库来封装GET请求的具体步骤,包括库的安装与配置、请求拦截器的设置以及如何在Vue项目中调用这些封装好的请求方法。 ... [详细]
  • Node.js与npm安装及Vue项目搭建指南
    本文详细介绍了如何安装Node.js和npm,以及如何使用npm安装Vue及其相关工具,包括vue-router和vue-cli,并创建一个简单的Vue项目。 ... [详细]
  • 资源推荐 | TensorFlow官方中文教程助力英语非母语者学习
    来源:机器之心。本文详细介绍了TensorFlow官方提供的中文版教程和指南,帮助开发者更好地理解和应用这一强大的开源机器学习平台。 ... [详细]
  • 探讨如何优化 npm 构建过程,提升开发效率,减少构建时间,并介绍自动化部署的最佳实践。 ... [详细]
  • Symfony是一个功能强大的PHP框架,以其依赖注入(DI)特性著称。许多流行的PHP框架如Drupal和Laravel的核心组件都基于Symfony构建。本文将详细介绍Symfony的安装方法及其基本使用。 ... [详细]
  • 解决Appium Doctor在Python自动化测试中的SyntaxError问题
    本文详细介绍了如何解决在使用Appium Doctor进行环境检查时遇到的SyntaxError: Unexpected token ...问题,并提供了完整的解决方案和最佳实践。 ... [详细]
  • Flowable系列教程:运用ProcessEngineConfigurator实现高级流程引擎配置
    本文探讨了通过ProcessEngineConfigurator接口实现对Flowable流程引擎的高级配置方法。这种方法允许开发者通过自定义配置器来增强或修改流程引擎的行为。 ... [详细]
  • Vue项目中应用骨架屏实践
    在当前开发的项目中,由于登录过程涉及多次重定向,导致用户体验不佳。为了改善这一状况,本文介绍了如何使用vue-skeleton-webpack-plugin插件在Vue项目中实现骨架屏,以减少用户感受到的白屏时间。 ... [详细]
  • C++网络编程:连接成功后的回调机制及前端视角下的异步编程解析
    本文探讨了C++网络编程中连接成功后的回调机制,并从一个前端开发者的角度深入浅出地介绍了异步编程的基本概念及其重要性,特别强调了JavaScript中异步编程的各种实现方式。 ... [详细]
  • Node.js中子进程的创建与管理详解
    本文深入探讨了Node.js中如何使用child_process模块来创建和管理子进程,包括exec、spawn和fork三种方法的具体应用及其实现细节。 ... [详细]
author-avatar
手机用户2502917553
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有