摘要：有写后台的哥们说，怎么写，怎么新建一个项目，然后我想了想，觉得写一个面向后台同学的教程也是有必要，文章中几乎没讲和细节处理的相关内容，减少接受不必要的信息量，降低的学习成本。
安装环境
文章内，图片很多，占据了一定的篇幅。有写后台的哥们说，vue怎么写，怎么新建一个vue项目，然后我想了想，觉得写一个面向后台同学的vue教程也是有必要，文章中几乎没讲css和vue细节处理的相关内容，减少接受不必要的信息量，降低vue的学习成本。如果有不清楚的地方，可以私信联系我，有不对不合理之处，敬请指出！我是迩伶贰！1. 安装nodejs环境
下载地址： (nodejs)[https://nodejs.org/zh-cn/down...]
安装(略)
2. 安装vue-cli系列工具npm install -g @vue/cli
npm install -g @vue/cli-service-global
3. vue create hello-world // 用vue 初始化hello-world 项目很多后端同学的用的编辑器是 idea, 我这里也用idea演示这个,细节之处不是本文的重点，可查看 idea创建vue项目
打开刚才初始化后的项目】
配置启动脚本，相对于配置java 的脚本要简单的多
启动：
访问地址
node_modules , 项目依赖的模块包，我们需要的模块包都会下载到这个目录下，我们开发时不用管
public 静态文件放的位置，放一下大的静态文件
src 项目的源文件
assets 小的静态文件
components 组件，一些公用的组件，比如登录框，输入组件等
APP.vue vue项目的根组件
main.js 项目的主入口文件，一些需要的基本的js css 可在这里引入
package.json 项目依赖、介绍、基本配置等的清单文件，我们只需要看，scripts 里面的执行命令即可， 比如serve ->启动， build -> 构建打包
其他 项目运行配置文件，可忽略
Tips：上面的内容了解即可，可不用深入，继续往下添加页面路由4. 增加路由vue-router
使用
import Vue from "vue";
import Router from "vue-router";
import HelloWorld from "./components/HelloWorld";
Vue.use(Router);
export default new Router({
mode:"history",
routes: [
{
path: "/helloworld",
name: "HelloWorld",
component: HelloWorld
}
]
})
import Vue from "vue";
import Router from "vue-router";
import HelloWorld from "./components/HelloWorld";
import Index from "./page/index";
import List from "./page/list";
Vue.use(Router);
export default new Router({
mode:"history",
routes: [
{
path: "/helloworld",
name: "HelloWorld",
component: HelloWorld
},
{
path: "/index",
name: "Index",
component: Index
},
{
path: "/list",
name: "List",
component: List
},
]
})
import Vue from "vue"
import App from "./App.vue"
import router from "./router";
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App),
}).$mount("#app")
访问路由：
以上面的list.vue 文件为例：
这是一个list 页面
-
Index
下面是axios请求到到数据
-
姓名：{{item.name}}
loading....
6. 增加脚手架可配置文件 vue.config.js
设置接口的跨域，vue-cli 启动的服务端口等
module.exports = {
devServer: {
port: 8090,
proxy: "http://localhost:4000"
}
}
7. 打包项目
会在项目目录下生成dist 文件夹，文件夹下的文件就是我们需要的静态文件
我们把打包后的静态文件扔进服务器即可，或者我们用ngxix 部署静态文件，index.html 就是最终指向的入口文件。
关于nginx的部署，需要的话可以参考： nginx会多少
整理不容易，转载请注明出处，我是迩伶贰，谢谢阅读
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/105842.html
摘要：我从今年的月份开始在知乎上连续回答前端开发相关的问题，至今已有将近三个月，回顾写过的一百多条回答，不少是给迷茫的前端工作者的建议。今天我把我的思考提炼整理成文，希望能给予在迷茫中前行中的前端学习工作者一些有用的建议。 本文首发于知乎专栏——前端指南作者：Mark MFS老师转载请注明来源。 我从今年的2月份开始在知乎上连续回答前端开发相关的问题，至今已有将近三个月，回顾写过的一百多条回...
摘要：不过细想想，我邮只有前端的选修课啥的，课程也不是那么就业导向。至少目前，很少有大公司完全把作为前后端通用的技术栈。不能把简单看做是在服务端的延展。编译这个思想在前端领域很重要不改变现有的语言环境同时进行最佳的工程实践。 P.S. 喷神请绕道，大神勿喷，不引战，不攻击，不钻牛角尖。 大二时第一次接触前端。许多同学估计都想过要做一个网站，大部分又是从PHP开始的（谁让它是世界上最好的语言呢...
摘要：转行前端有哪些疑虑在人生的抉择处，寻求一些别人的经验和总结，无可厚非，但是决定了就一定要坚定的走下去，谨慎是为了更好的坚持，而不是放弃的理由。写在前面这里前后端指的是开发的前后端。 转行前端有哪些疑虑？ 在人生的抉择处，寻求一些别人的经验和总结，无可厚非，但是决定了就一定要坚定的走下去，谨慎是为了更好的坚持，而不是放弃的理由。写在前面：这里前后端指的是web开发的前后端。1、前端岗位需...
摘要：转行前端有哪些疑虑在人生的抉择处，寻求一些别人的经验和总结，无可厚非，但是决定了就一定要坚定的走下去，谨慎是为了更好的坚持，而不是放弃的理由。写在前面这里前后端指的是开发的前后端。 转行前端有哪些疑虑？ 在人生的抉择处，寻求一些别人的经验和总结，无可厚非，但是决定了就一定要坚定的走下去，谨慎是为了更好的坚持，而不是放弃的理由。写在前面：这里前后端指的是web开发的前后端。1、前端岗位需...
摘要：转行前端有哪些疑虑在人生的抉择处，寻求一些别人的经验和总结，无可厚非，但是决定了就一定要坚定的走下去，谨慎是为了更好的坚持，而不是放弃的理由。写在前面这里前后端指的是开发的前后端。 转行前端有哪些疑虑？ 在人生的抉择处，寻求一些别人的经验和总结，无可厚非，但是决定了就一定要坚定的走下去，谨慎是为了更好的坚持，而不是放弃的理由。写在前面：这里前后端指的是web开发的前后端。1、前端岗位需...
阅读 2923·2023-04-26 01:52
阅读 3450·2021-09-04 16:40
阅读 3615·2021-08-31 09:41
阅读 1707·2021-08-09 13:41
阅读 471·2019-08-30 15:54
阅读 2910·2019-08-30 11:22
阅读 1585·2019-08-30 10:52
阅读 932·2019-08-29 13:24
