前端需要什么环境？
- 相比后端，前端的环境要好配置一些，因为系统是基于web的，所以有的时候只需要一个浏览器就行了
- 此项目需要的前端环境如下
- 火狐、谷歌、edge等主流浏览器，不要用ie就行
- nodejs，用来安装vue的
浏览器安装
- 我使用的是win10自带的edge浏览器，想用别的浏览器请自行下载
Vue安装
- 这里说的vue安装，其实是安装vue-cli，它集成了一系列解决方案，能够帮助我们快速搭建好单页应用、方便安装管理依赖等
- 网上对vue-cli安装的教程有很多，建议自行搜索，但一定记住它的版本必须在3以上，否则不能使用vue ui
- 简单概括vue-cli的安装步骤
- 安装nodejs（安装stable版，而不是latest）
- 更换npm的下载源，或者下载cnpm
- 用npm install @vue/cli -g命令安装vue-cli
创建一个vue项目
-
前端环境设置好了以后，就可以开始创建一个vue项目了
-
打开命令行，输入vue ui，开启图形管理界面
-
在创建选项中，将目录定位到我们之前clone下来的git仓库上，选择创建项目在与后端项目同级的位置上
-
点击创建，在下一个创建新项目选项中的配置如下，这里不选择初始化git仓库，因为很明显我们已经有了git仓库了
-
预设选择标准预设即可，等待项目创建完毕
-
项目创建完毕，用vscode打开它（你可能需要安装vue插件以提供语法支持功能），目录如下
前端项目目录结构简单介绍
- node_modules
- 项目依赖都在这里，是一个单独的环境
- public
- favicon.ico是网站的小图标
- index.html是入口文件
- src
- assets
- 用来存访一些静态图片，注意要以有组织的形式存访
- components
- 在这里编写一些可复用的组件，也可单独作为一个页面
- router
- index.js这个文件是用来对前端路由进行管理的，归功于vue-router，前端真正意义上实现了路由由自己来决定
- store
- index.js这个文件是用来对全局状态进行管理的，实质上是vuex的作用
- views
- 编写一些视图文件，真正意义上展现出来的页面，会结合vue-router一起使用，注意命名规范
- App.vue
- 相当于一个模板，模板内部可以不断地替换各种各样的视图，但是模板的整体组成不会改变
- main.js
- 程序入口，全局依赖，全局配置都写在这里
- assets
- .gitignore
- 熟悉git的人都知道这时git提交时会根据正则表达式忽略掉部分文件
- package.json
- 记录着项目的一些信息，比如项目名、版本、脚本代码、开发依赖、运行依赖等，非常重要
至此，前端环境的搭建和前端项目创建已讲解完毕，下一节会讲解此项目开发所需要的各种依赖，以及用vuetify写一个模板页
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
