fastapi+vue前后端分离之Vue环境搭建-01

测试开发笋货 2021-09-14

2909

大家好~我是小方，欢迎大家关注「测试开发笋货」体完记得俾个「like」呀 ·

回顾

上一期我们已经实现脚本api化，相当于把后端项目搭建好了，那么我们今天来学习一下前端vue的搭建

题外话

前端这一块不是很熟悉，目前也是跟着饭佬的Vue系列来入门，搭建前端项目参考了萌货的文章~

创建前端项目

首先先下载node和npm，直接官网上下载就可以了，傻瓜式安装。https://nodejs.org/zh-cn/download/ 执行命令，出现版本号代表安装成功

node -v
npm -v

接着通过npm 安装vue-cli

i：安装
-g: 全局
npm i -g vue-cli

Mac安装时出现错误，百度后，因为执行命令行没有获得管理员权限，在命令前面加sudo即可

sudo npm i -g vue-cli

安装成功去到对应目录下创建前端项目

vue-init webpack webDocs
? Project name web_docs
? Project description 工具平台
? Author fang
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm
解释：
Project name：项目名称
Project description：项目描述
Author：作者名
Install vue-router：是否安装Vue路由
Use ESLint to lint your code：是否启用eslint检测规则，建议关闭
Set up unit tests：是否建立单元测试，关闭就好了
Setup e2e tests with Nightwatch：是否安装e2e测试，不需要关闭
Should we run xx:选择启动项目的命令，这里最好选npm

创建成功后，进入webDocs下启动前端项目

cd webDocs
npm run dev

编译通过后，会有这么一段话，浏览器打开后，即可看到熟悉的Vue图标

Your application is running here: http://localhost:8080

用WebStorm打开webDocs项目，结构如下：

目录解析如下：

我们来美化一下HelloWorld.vue，将多余的代码删除，只留下这些代码：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '欢迎关注测试开发笋货👏'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>