ui vue 创建项目教程 并关闭语法_Vue.js 从入门到放弃（1）：使用Vue-Cli创建项目...

0x00 前言

最近在学习Web前端方面的知识，把一些所看所学所想做一个简单的记录，一来是方便自己梳理相关的知识点，二来如果我的笔记能给像我一样的初学者带来一点帮助，那还是极好的。

说起来技术迭代的速度真是快的一逼，稍有不慎就被落在了后面，关于前端的知识我还一直停留在Bootstrap+jQuery的上古世纪。

近年来前端框架层出不穷，什么React、Vue.js，什么npm包、脚手架。各种新名词新技术在前端行业炒的火热，前端开发早已经不是早年的画画那么简单了。

“前后端分离”、“MVVM”、“前端工程化”、“一个完整的Web项目前后端如何联动？”、“像Django这种POST请求自带CSRF token的框架又是如何优雅的与前端进行交互？”，带着这些并不成熟的疑问，跌跌撞撞的走进前端世界。

0x01 内容简介

在这篇文章中主要以Vue-Cli 3.0为主线进行介绍，涉及以下5个内容：如何使用Vue UI创建、管理项目

前端项目结构以及目录梳理

初始文件的添加

框架基本配置介绍

如何实现跨域操作

0x02 如何使用Vue UI创建、管理项目

一、使用Vue UI创建项目

先来了解一下什么是Vue UI。简单介绍，Vue UI就是一个Web端的Vue-Cli工具，其提供了对Vue项目的管理功能，如查看、创建、导入等。

有图形化界面操作起来还是soeasy的，创建项目部分不再赘述，详细对其配置的功能做介绍。

Bable用于将高版本的ES语法转化为低版本ES语法的工具，解决浏览器兼容性问题。需要选中。

TypeScript语法支持。不需要选中。

PWA，渐进式移动应用。不需要选中。

Router，路由。需要选中。

Vuex，Vue官方的状态管理工具。需要选中。

CSS预处理器。需要选中。

语法检查工具。(这个东西对于初学者，还着急出项目的那种，是一个深坑！！！)需要选中。

单元测试、端到端测试。不需要选中。

配置文件。需要选中。

接着往下走：

Web端和命令行中都可以看到正在为创建项目做准备工作，如安装依赖等。

一、使用Vue UI管理

安装完成后Web端的内容如下：

都是图形化操作，没啥说的。

0x03 项目文件结构及目录梳理

基于Vue UI生成的项目frontend，整体的目录结构如下：

各个文件承担的功能为(一些显而易见的文件这里不再赘述)：

vue.config.js

vue项目的配置文件，目前有一个属性为lintOnSave: false，是我们在创建项目时设置，意思是取消每次保存项目是都进行ESLint代码规范的检查。

package.json

定义项目的描述，如项目名称、版本号、开发依赖、编译后的依赖，等内容。

postcss.config.js

postcss的配置文件。用于补充CSS兼容性代码的工具。

package-lock.json

项目的配置文件以及依赖的详细信息。

babel.config.js

babel的配置文件。

.eslintrc.js

eslintrc规则文件。

public文件夹下放置的为公共文件，比如index.html文件，为项目的生成模板，我们写的vue的代码，在webpack打包项目的时候，最后都会基于该模板转换为浏览器可读的三大件：html+javascript+css。

src，这个不用多说，写代码的都知道，项目配置完成后主要的工作量就在这里了。

assert用于放置静态资源，如图标、图片、字体文件。

components组件，常用功能可以复用的逻辑可以抽象为组件放置在该目录下，方便调用。

views视图文件，页面。

App.vue基础组件。

main.js项目入口。开发运行和编译时都会从该文件开始依次执行。

routes.js路由文件。

store.js状态管理文件。

0x04 初始文件的添加

为了方便程序的后续开发工作，除了创建时由vue ui自动生成的文件外，还需要增加一些文件作为补充。方便我们日后的开发工作。

.editorconfig

编辑器配置文件，主要功能是用于配置编辑器的使用习惯。

api目录

用于存放api接口，项目的ajax请求均存在与该目录下。

assert文件夹的整理，创建img和font目录用于存在图片以及字体文件。

创建配置文件夹config以及配置文件index.js。

文件内容如下：

export default {

//

}

创建该文件后在其他文件，如store.js可以通过如下方式导入。

import config from './config'

创建文件夹directive，以及下面的index.js,用于存放自定义指令。

创建lib文件夹，创建util.js文件，与业务有关系的工具和方法存放于该文件中。与业务无耦合的纯工具方法放于tools.js中。

创建route文件夹，适用的场景是除了简单的路由外，还有路由拦截功能时，为了增加程序的可读性，使其更易理解，则采用该种方式。

将route.js移动至该文件夹，再创建index.js。将index于route文件抽离。

创建store文件夹，

index.js文件为之前的state.js文件。将其他创建的文件引入至该目录下。

创建module

创建mock

用于模拟api接口的返回值。

安装mockjs

配置vue.config.js

0x05 如何设置跨域

devServer: {

proxy: 'http://localhost:4000'

}

将请求转发至该服务上即可。

运行项目：

0x06 后记

睡了，累。

周末去体检。