Vue项目如何与后台进行对接

第一次使用vue写项目,但是不知道vue-cli的项目如何与后台进行对接,希望大家能多多指教。

  1. Vue CLI 和你编写的 Vue App 本身基本没有什么必然关联。
  2. 不论是不是 Vue 项目,与后台关联都是 JS 那一套,Vue 与这个环节无直接关联。
  3. 你的问题,先下放到「JS/jQuery 项目如何跟后台对接」思考一下。
  4. 如果需要推荐 HTTP 库的话,axios 很好用。
2 Likes

npm run build 就能直接将vue进行打包吗,然后直接就可以把打包好的dist文件夹放在服务器上就可以访问了吗?

最近接触的东西比较多,像npm,vue,webpack,git,sass等,感觉没有一个系统把他们联系起来
脑子有点乱

「万变不离其宗」,所谓「把它们联系起来的系统」就是 html + js + css (+ etc.) => App 的过程,Vue 也好 Webpack 也好都不过是用于其中不同环节的工具。这个过程从前端开发出现时就存在,明白这个过程就不会乱了。

Vue 是为了降低 Web App 的开发/维护难度而诞生的,它增强了编写 HTML 和 JS 这一环节的体验;Sass 是为了解决标准 CSS 写起来不趁手而诞生的,它增强了书写 CSS 这一环节的体验;Webpack 是为了整合前端代码打包处理步骤而诞生的,它增强了 => 这一环节的体验。

Webpack 依赖于 Node 生态,而 Node 生态建立在包 (Package) 的概念之上,npm 就是操作这些包的工具。

代码开发多了就会面临软件工程上的代码管理问题,git 则是代码版本控制系统的流行工具之一。

明白了这些名词实际上是什么,分别对应了「开发」这件事的哪个部分,你就不容易迷茫了。

4 Likes

工作中学习前端已经7个月了,感觉到了一个阶段,很多东西需要 学习,感觉有点累,不知道您是怎么走过来的呢?

首先要摆正心态,不要抵触新事物,也不要抵触学习。新事物让你看得更远,学习让你站得更高。

其次要理解本质,或者说总结规律。两仪生四象,有些东西其实是不变的。

当然我本人兴趣在此,所以走起来可能会比较轻松。

2 Likes

vue如何设置全局的scss文件呢?该如何使用这个全局scss文件?

之前一直是单个组件的样式使用,以及使用@import导入相关的scss文件

如果你只是需要应用这个样式文件里的样式,main.js 或者 app.vue 里 import 它即可。

如果你希望在全局共用里面的变量、函数什么的,看看 sass-resources-loader

在main.js中导入了common.scss文件,在其他组件中使用了common.scss中的变量,但是报错,显示没有找到该变量

所以啊,import 只负责应用样式规则,变量之类的东西需要外部工具处理一下,比如我上面说的 sass-resources-loader。

也就是说咋main.js中导入公共的样式表是可以全局使用的,但是如果样式表中包含了变量和函数之类的就必须通过sass-resources-loader来进行处理了,处理完成之后才能使用

我再无耻的推广一下我的项目:


可以多看看这个项目的readme

这个事情上你要明白的是,Scss 中的变量只是方便同一作用域下样式规则的书写,它是 Scss 内部的机制,所以一旦脱离这个作用域就不能发挥作用(比如不再是 Scss 文件,比如不在同一个文件——如果你不手动引入的话)。

import 进来的样式文件会被 Webpack 转换为 css 文件或 <style> 标签(取决于你的 Webpack 配置)。如果样式文件不是标准 CSS,则会被对应的 loader 转换为标准 CSS。在这个过程中那些标准 CSS 不支持的东西(比如变量)会被移除。

sass-resources-loader 的作用即是,自动在每个样式文件里加上 @import,其实就是省了你自己手动引入的工夫。

1 Like

哦哦,因为组件中我的这样设置了,所以可以在每个组件中使用scss中的@import导入其他scss文件,并且能够解析,如果我直接在main.js中导入scss文件,他就只能被当作css文件解析,所以里面的css规则能够正常使用,但是变量和函数之类不属于css规则的则被忽略掉了,通过sass-resources-loader来给每个组件添加scss文件,而组件是能够解析scss文件的;
那我想到了,可以直接在app.vue中

@import XXX

也能达到共享的目的

并不能。注意我说的,「同一作用域」,这个作用域可以是文件,也可以是 <style> 标签。你在 app.vue 中 import 了它,就只能在 app.vue 中的那个 <style> 标签内使用那些变量。

另外,这个问题已经脱离这个帖子原来的主题了,建议另开新帖讨论。

image

推荐你去B站看一个叫小马视频的up主,vue的进阶教程