Vue项目开发流程(自用)
一、配置开发环境
1.1 安装Node.js
npm集成在Node中，检查是否安装完成：node -v
1.2 安装cnpm(淘宝镜像)
npm install -g cnpm，检查安装是否完成：cnpm -v
1.3 安装Vue脚手架
cnpm install -g vue-cli
1.4 项目初始化
vue init webpack vue-project
二、明确目录结构
├── README.md 项目介绍
├── index.html 入口页面
├── build 构建脚本目录
│ ├── build-server.js 运行本地构建服务器，可以访问构建后的页面
│ ├── build.js 生产环境构建脚本
│ ├── dev-client.js 开发服务器热重载脚本，主要用来实现开发阶段的页面自动刷新
│ ├── dev-server.js 运行本地开发服务器
│ ├── utils.js 构建相关工具方法
│ ├── webpack.base.conf.js wabpack基础配置
│ ├── webpack.dev.conf.js wabpack开发环境配置
│ └── webpack.prod.conf.js wabpack生产环境配置
├── config 项目配置
│ ├── dev.env.js 开发环境变量
│ ├── index.js 项目配置文件
│ ├── prod.env.js 生产环境变量
│ └── test.env.js 测试环境变量
├── mock mock数据目录
│ └── hello.js
├── package.json npm包配置文件，里面定义了项目的npm脚本，依赖包等信息
├── src 源码目录
│ ├── main.js 入口js文件
│ ├── app.vue 根组件
│ ├── components 公共组件目录
│ │ └── title.vue
│ ├── assets 资源目录，这里的资源会被wabpack构建
│ │ └── images
│ │ └── logo.png
│ ├── router 前端路由
│ │ └── index.js
│ └── views 页面目录(新建文件夹)
│ ├── components 页面组件
│ ├── hello.vue 页面
│ └── notfound.vue
├── static 纯静态资源，不会被wabpack构建。
└── test 测试文件目录（unit&e2e）
└── unit 单元测试
├── index.js 入口脚本
├── karma.conf.js karma配置文件
└── specs 单测case目录
└── Hello.spec.js
三、安装依赖(根据项目所需补充)
3.1 在组件中使用less
安装：cnpm i --save-dev less less-loader style-loader
3.2 使用方式：
<style lang="less" scoped>
//外部导入(也可以直接编写less)
@import url("../assets/less/index.less");
</style>
四、引入插件(以bootstrap为例)
4.1 直接在入口页面index.html中引入，文件存放在static静态资源文件夹(避免了jquery和bootstrap文件引入先后问题)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="./static/js/jquery.min.js"></script>
<script src="./static/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="./static/css/bootstrap.min.css">
<title>vue实例</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
五、使用axios获取数据
5.1 安装axios
cnpm i --save-dev axios
5.2 配置config/index.js(可以解决跨域问题)
proxyTable: {
'/api': {
target: 'https://api.douban.com',//设置你调用的接口域名和端口号
changeOrigin: true,
pathRewrite: {
'^/api': ''//这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'https://api.douban.com/user/add'，直接写‘/api/user/add’即可
}
}
}
5.3 调用
5.3.1 在需要使用http请求的页面导入
import axios from 'axios'
5.3.2 get请求：
export default {
name: "index",
data() {
return {
info: null
};
},
methods: {
getData() {
axios
.get("/api/v2/movie/in_theaters")
.then(res=> {
this.info = res.data;
})
.catch(err=> {
console.log(err);
});
}
}
};
5.3.3 post请求(示例，找不到post开放接口)：
export default {
name: "index",
props: [],
data() {
return {
info: null
};
},
methods: {
getData() {
axios
.post("/api/v2/movie/in_theaters",{
params: {//传参
page: 1,
count: 20
}
})
.then(res=> {
this.info = res.data;
})
.catch(err=> {
console.log(err);
});
}
}
};
六、Vue文件导入
配置build/webpack.base.conf.js,添加匹配规则：
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
}
持续更新。。。。。
转载于:https://www.cnblogs.com/zgdawdl/p/10509057.html
Vue项目开发流程(自用)的更多相关文章
- VUE项目开发流程
前期准备 安装npm 安装webpack\vue-cli(2.9.6版本--版本不同可能会导致以下一些目录结构以及错误解决办法不符合实际情况) 创建项目 初始化创建项目,项目名称.项目描述.拥有者等等 ...
- Vue项目搭建流程 以及 目录结构构建
Vue项目搭建流程 以及 目录结构构建 一个小的Vue项目, 基于微信浏览器的移动端, 做了这么多的练习项目, 这一次准备记录下构建的过程, 以方便以后的调高效率 环境准备 操作系统 我的 windo ...
- 使用.NET MVC框架项目开发流程（项目开发流程）
MVC项目开发流程 整理需求,进行需求分析.项目设计. 整理数据项,建数据库做前期准备,并整理字典. 建立所需数据库表和视图和模型. 页面实现其初步功能(跳过逻辑后台代码),只是实现页面之间的跳转以及 ...
- 【CC2530入门教程-01】IAR集成开发环境的建立与项目开发流程
[引言] 本系列教程就有关CC2530单片机应用入门基础的实训案例进行分析,主要包括以下6部分的内容:1.CC2530单片机开发入门.2.通用I/O端口的输入和输出.3.外部中断初步应用.4.定时/计 ...
- K2项目开发流程
(自己的学习资料) K2项目开发流程: 1.在VS2013中设计流程,并在K2 Workspce中测试流程 首先是新建新建一个k2的Process文件..kprx后缀. 在里面创建所需要的流程.由于我 ...
- 覃超：Facebook的项目开发流程和工程师的绩效管理机制
覃超:Facebook的项目开发流程和工程师的绩效管理机制 http://mp.weixin.qq.com/s?__biz=MjM5MDE0Mjc4MA==&mid=2650992350&am ...
- Django (九) 项目开发流程&项目架构
项目开发流程&项目架构 1. 软件开发的一般流程 1. 需求分析及确认: 由需求分析工程师与客户确认甚至挖掘需求.输出需求说明文档. 2. 概要设计及详细设计: 开发对需求进行概要设计,包 ...
- Vue项目开发相关问题总结
Vue项目开发相关问题总结 一.创建一个项目(两种方式) 1.通过CLI命令行创建,具体步骤如下: (1)Node 版本要求 Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11 ...
- Vue项目开发最新、最全代码规范文档
Vue项目开发最新.最全代码规范文档 2019年02月21日 10:43:49 yw00yw 阅读数 337 一. 目录结构 |— build 构建脚本目录 |— build.js 生产环境构建( ...
随机推荐
- 从String 聊源码解读
@ 目录 源码实现 构造方法 equals 其他方法 常见面试题 你真的了解String吗?之前一篇博客写jvm时,就觉得String可以单独拎出来写一篇博客,毕竟几乎所有的面试都是以String开始 ...
- Evolution of Image Classifiers，进化算法在神经网络结构搜索的首次尝试 | ICML 2017
论文提出使用进化算法来进行神经网络结构搜索,整体搜索逻辑十分简单,结合权重继承,搜索速度很快,从实验结果来看,搜索的网络准确率挺不错的.由于论文是个比较早期的想法,所以可以有很大的改进空间,后面的很大 ...
- asap异步执行实现原理
目录 为什么分析asap asap概述 asap源码解析-Node版 参考 1.为什么分析asap 在之前的文章 async和await是如何实现异步编程? 中的浅谈Promise如何实现异步执行小节 ...
- 最全的中文NLP资源库，你确定不来看一下吗？
最全的中文NLP资源库,你确定不来看一下吗? 22/100 发布文章 qq_39248703 hello,小伙伴们大家好,今天给大家分享NLP资源库,可以说是最全的资源库了,很多包非常有趣,值得收藏, ...
- typename 关键字
1.class关键字的同义词 template <typename T> const T& max(const T& x, const T& y) { return ...
- docker-compose 基于Dockerfile 安装并启动redis容器的血案
前言 为了实现"一键部署"的目的,我采用Dockerfile 和 docker-compose来实现自己的目的.这个过程中,我怎么也无法启动自己的redis-server服务. 目 ...
- 《JavaScript 模式》读书笔记（6）— 代码复用模式2
上一篇讲了最简单的代码复用模式,也是最基础的,我们普遍知道的继承模式,但是这种继承模式却有不少缺点,我们下面再看看其它可以实现继承的模式. 四.类式继承模式#2——借用构造函数 本模式解决了从子构造函 ...
- win7下delphi中的help文档问题
一,要安装WinHlp32.exe 文件 二, 三,在安装目录下:
- 今天整理了几个在使用python进行数据分析的常用小技巧、命令。
提高Python数据分析速度的八个小技巧 01 使用Pandas Profiling预览数据 这个神器我们在之前的文章中就详细讲过,使用Pandas Profiling可以在进行数据分析之前对数据进行 ...
- ubuntu允许root远程登录
之前说了,怎么设置root用户登录,但是使用Xshell等工具操作Ubuntu,用户登录不进去,原因很简单,没有开启root登录的权限. 1.检查ssh服务是否开启 使用以下命令,查看是否开启 ps ...