持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第22天，点击查看活动详情
大家好~我是小方，欢迎大家关注笋货测试笔记体完记得俾个like呀
回顾
上一期我们已经实现脚本api化，相当于把后端项目搭建好了，那么我们今天来学习一下前端vue的搭建
题外话
前端这一块不是很熟悉，目前也是跟着菜鸟教程的Vue系列来入门，搭建前端项目参考了萌货的文章~
创建前端项目
首先先下载node和npm，直接官网上下载就可以了，傻瓜式安装。nodejs.org/zh-cn/downl… 执行命令，出现版本号代表安装成功
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>
将项目logo换一下~
重新启动服务后，帅帅哒~
总结
今天介绍了前端项目Vue的搭建，你学废了么？
下期介绍如何实现前端逻辑，我哋下次再见👋🏻👋🏻👋🏻「俾个like再走啦」
