django项目如何连接前端_工作笔记前端小白如何搭建前端项目

“前言,来到杭州差不多有两年左右了,大小小做过不少项目。之前都是有技术大佬在前面抗住、作为菜鸡的本人只要在大佬后面听大佬指挥摸鱼划水就行。最近公司接到一个新项目,由于大佬们纷纷出走,于是搭建前端框架的任务就落到本人的头上。本来是想选择react 进行前端开发,但现实由于学艺不精,不得不放弃react采用vue。下面就是使用vue-cli4搭建项目的全过程”

f4ab9d6fc358c2035cf11549d31f0cdc.png

  1. 首先 我们安装vue-cli4,运行 npm install -g @vue/cli( 官网链接:https://cli.vuejs.org/zh/)

    90ecf0aca7d9ce35f391870b72eb29a1.png

    2.安装完成之后,我们需要输入 vue —version 来查看是否已经全局安装。

b016cb6b7c3f989e76aa9008bb08182a.png

3. 采用自动化安装vue create yourDemoName 或者使用vue ui使用图形化界面安装(安装配置以及所需插件需看个人需求)

3cc8fe902e6b54992635a3077df1bfb0.png

4.安装完成之后打开文件大概是这样的,因为我没有选配置eslint这些。

dd46e3743cda0f9c85a1064fdd5dc444.png

5.安装脚手架完成之后我们需要按照我们业务需求来引入所需的库,这里我引入了vue-router,axios,element-ui,md5。

6.配置vue-router,如果在生成脚手架的过程中已经引入那就跳过这一步。

    6-1.进入src目录下新建一个router.js (或者建一个router的文件然后里面写一个index.js)

    6-2.在router.js里面写配置。

    6-4.在main.js 引入刚刚写好的router.js

7.配置开发环境变量和模式

     7-1.参考官网,我们需要新建配置文件来替换我们的项目根目录中的下列文件来指定环境变量。

     7-2.新建一个.env.devolop。根据官网所描述我们的这个环境文件里只能包含环境变量的“键=值” key=value,只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。我们可以在我们的项目里使用 process.env.VUE_APP_XXXX。

     7-3.我们新建环境配置文件之后,需要在package.json 新建一个scripts的启动。由于我配置的是本地开发环境,所以我在scripts 下面新增了一行"start": "vue-cli-service serve --mode devolop”。注意这个devolop 要与我们新建的环境文件.env.devolop 的名字要一致,否则访问不到我们所配置的文件。

8.配置vue.config.js。根据官网描述根目录下新建一个vue.config.js。具体配置看官网(https://cli.vuejs.org/zh/config/#vue-config-js)

     8-1.devServer因为我们需要在这里配置跨域代理。

      1. devServer.host:localhost   主机地址

      2. devServer.port:8081          主机端口

      3. devServer.https:false        是否开启https

      4. devServer.open:true          是否自动打开浏览器

      5. devServer.poxy: {              跨域代理

        1. “/api”:{

target:process.env.VUE_APP_BASE_URL // 远端网络

changeOrigin: true,// 是否开启跨域

         pathRewrite: {//对请求路径进行重定向以匹配到正确的请求地址,

            '^/api': ''}}

    8-2.引入公共sass文件

vue-cli css: {

    loaderOptions: {

      // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效

      // 因为 `scss` 语法在内部也是由 sass-loader 处理的

      // 但是在配置 `prependData` 选项的时候

      // `scss` 语法会要求语句结尾必须有分号,`sass` 则要求必须没有分号

      // 在这种情况下,我们可以使用 `scss` 选项,对 `scss` 语法进行单独配置

      scss: {

        prependData: `@import "@/scss/main.scss";`

      },

    }

  }

9.引入axios 

     9-1.重写axios方法,之前我们已经开启跨域代理,所以我们得把axios的baseurl设置为"/api"

这样子我们的一个前端项目就搭建完毕了,还有各种需要我们自动配置的需要我们根据实际需求来定制.具体demo请查看 https://gitee.com/qianluoshui/vue-demo

别问我为啥不上github,因为懒。

如果各位大佬觉得本文不错,请   关注  我,您的关注是我下篇推文最大的动力。虽然下一篇推文也不知道什么时候能出来。

大佬们如果想看java干货,请关注  刘志航   满满的java干货,而且每周固定推送嗷

?是 他最新推送

线程池 ThreadPoolExecutor 原理及源码笔记

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/529012.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mysql编码转换工具_mysql编码转换搞定

按照下面做法,终于成功了!庆祝,纪念......背景:某个系统的mysql数据库dnname采用默认的latin1字符集,系统升级需要将所有数据转换成utf-8格式,目标数据库为newdbname(建库时使用utf8)方法一:步骤…

es6去除重复项_Excel的去除重复项你真的明白原理吗?浅尝去除重复项的函数奥秘...

Excel函数学习:悟空百问の009:去除重复项的深入思考我们经常整理一些数据,数据不可以动原数据,又需要进行数据分析处理,整理,数据汇总,如何快速的找到这些重复的值,这成了我们很头疼…

unit类型是什么?_面试官虚晃一枪:项目中有用过锁吗?能解释一下什么是AQS?...

1 前言锁是用来控制多个线程访问共享资源的方式,一般来说,一个锁能防止多个线程同时访问共享资源(但是有些锁可以允许多个线程并发的访问共享资源,如读写锁)。在以前,Java程序是靠synchronized来实现锁功能的,而在Java…

浏览器里面看到的表单数据映射到python_python爬虫入门01:教你在 Chrome 浏览器轻松抓包...

通过python爬虫入门:什么是爬虫,怎么玩爬虫?我们知道了什么是爬虫也知道了爬虫的具体流程那么在我们要对某个网站进行爬取的时候要对其数据进行分析就要知道应该怎么请求就要知道获取的数据是什么样的所以我们要学会怎么抓咪咪!哦…

c#二叉树 取叶子节点个数_两种类似但是原理不同的算法求二叉树的所有叶子节点和...

技术提高是一个循序渐进的过程,所以我讲的leetcode算法题从最简单的level开始写的,然后到中级难度,最后到hard难度全部完。目前我选择C语言,Python和Java作为实现语言,因为这三种语言还是比较典型的。由于篇幅和精力有…

所有的service报红但不报错_从一个应用报错来看centos系统的/tmp目录自动清理规则...

概述分享最近应用碰到的一个奇怪bug,一开始以为是代码上的问题,找了一段时间发现居然是因为系统的一个自动清理规则导致,下面一起来看看吧~一、应用报错:logwire.core.exceptions.GeneralUnhandledException: 服务端未处理异常...…

springboot中接口实例化_AngularJs中控制器的定义,实例化,作用域范围

AngularJs中控制器的定义,实例化,作用域范围基于AngularJS入门与进阶(江荣波 著)这本书的笔记AngularJS 1.x的demoAngularJS1.x和Angular2,4,5是不一样的两个东西,构建方式,语法,都很多不同AngularJs控制器定义与实例化…

高斯核函数参数确定_高斯过程

之前看过高斯过程(GP),不过当时也没太看懂,最近花时间认真研究了一下,感觉总算是明白咋回事了,本文基于回归问题解释GP模型的思想和方法。文中的想法是自己思考总结得来,并不一定准确,也可能存在错误性。为…

uniapp光标自动定义到文本框_特检自动化行吊静力检测方案

主要测量功能使用徕卡测量开发的Windows版数据传输软件,通过蓝牙连接徕卡DISTO,经过简单的测量周期设置,即可实现自动化的距离检测。测量数据还可以输出Excel,甚至可以实时发送至PC运行的第三方软件中,这么强大的软件还…

安装python时需要勾选_一体化污水处理设备安装时需要注意事项

一体化污水处理设备用于处理生活污水和低浓度有机污水,它基本上采用机电完全封闭的结构,不需要专业人员进行管理。它方便且易于清洁,因此引起了很多关注。一体化污水处理设备的安装方法通常为三种:地埋式,地上式和半地…

oracle驱动maven报错_在Maven仓库中添加Oracle JDBC驱动

由于Oracle授权问题,Maven3不提供Oracle JDBC driver,为了在Maven项目中应用Oracle JDBC driver,必须手动添加到本地仓库。一.首先要得到Oracle JDBC Driver2.通过Oracle的安装目录获得,位置在“{ORACLE_HOME}jdbclibojdbc14.jar”二.手动安装…

python3.6程序_python3.6如何生成exe程序

PyInstaller的原理简介PyInstaller其实就是把python解析器和你自己的脚本打包成一个可执行的文件,和编译成真正的机器码完全是两回事,所以千万不要指望成打包成一个可执行文件会提高运行效率,相反可能会降低运行效率,好处就是在运…

java切片_ java中一个极其强悍的新特性Stream详解(非常实用)

java8中有两个非常有名的改进,一个是Lambda表达式,一个是Stream。如果我们了解过函数式编程的话,都知道Stream真正把函数式编程的风格引入到了java中。这篇文章由简入繁逐步介绍Stream。一、Stream是什么从名字来看,Stream就是一个…

java获取网络图片_有了这50套Java毕设项目(源码 案例),offer拿到手软,无偿分享...

简介:又到了开学季,不少人都很是烦恼,手把手教你做Java毕设项目,有教程视频源码100套随意选择,试试手!!列举其中2个系统大纲在线考试系统1.综述网络考试系统的项目背景及国内外发展现状&#xf…

linux将日期和日历信息追加到文件中_Linux常用指令

常用指令 1、帮助指令 man [指令或者配置文件] help 指令 2、文件目录类指令 1、pwd 功能:显示当前工作目录的绝对路径 2、ls [选项] [目录或者文件] 功能:列出文件名和目录使用:ls -l 以列表的形式显示信息ls -a …

一个搜索框多个按钮_网站搜索栏设计指南:要不要?怎么设计?

在网站的设计过程中,搜索栏是一个很容易被忽略的部分,但用户却依赖它来寻找特定的信息。由于搜索栏是网站中最常用的元素之一,所以搜索栏的设计对用户体验有着重要的影响。网站是否需要搜索栏?搜索栏使用背后的思维和心理是帮助用…

状态机设计的一般步骤_浅谈状态机

来源:公众号【ZYNQ】ID :FreeZynq整理 :李肖遥本文目录前言状态机简介状态机分类Mealy 型状态机Moore 型状态机状态机描述一段式状态机二段式状态机三段式状态机状态机优缺点总结扩展-四段式状态机01. 前言状态机是FPGA设计中一种非常重要、…

java中default_Java 中关于default 访问权限的讨论

Java中关于成员变量访问权限问题一般书中会给出如下表格:简单地描述一下表中的内容:用private 修饰的成员变量只能在类内部访问;用default修饰的成员变量可以再内部访问,也可以被同个包(同一目录)中的类访问;default修…

java 输出当月日历_java 实现打印当前月份的日历

实现当前日历的打印,当前日期用*来表示。关键得出这个月的第一天是星期几。基姆拉尔森计算公式W (d2*m3*(m1)/5yy/4-y/100y/400) mod 7在公式中d表示日期中的日数1,m表示月份数。y表示年数。注意1:在公式中有个与其它公式不同的地方&#xff…

xmlhttprequest 跨域_跨域资源共享(CORS)安全性

跨域资源共享(CORS)安全性背景 提起浏览器的同源策略,大家都很熟悉。不同域的客户端脚本不能读写对方的资源。但是实践中有一些场景需要跨域的读写,所以出现了一些hack的方式来跨域。比如在同域内做一个代理,JSON-P等。但这些方式都存在缺陷&…