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 生产环境构建( ...
随机推荐
- Appium：We shut down because no new commands came in
在使用Appium自带的Inspector来查找元素定位时,一段时间(60s)不对其进行任何操作appium就会关闭Android应用,并打印出 info: [debug] We shut down ...
- Maven快照版本要这样用才真的香！
Bug的身世之谜 今天又分享一个问题解决的故事.请看下图框起来的错误,明显就是找不到这个class嘛! 下面我们按照正常人的思路去排查这个问题,既然找不到class那就先看这个依赖的jar包有没有,如 ...
- 微信号网页版api
Django Wechat Api djangowechatapi是基于wxpy和django制作的web应用 安装 使用pip pip install djangowechatapi 源码安装 gi ...
- Genetic CNN: 经典NAS算法，遗传算法的标准套用 | ICCV 2017
论文将标准的遗传算法应用到神经网络结构搜索中,首先对网络进行编码表示,然后进行遗传操作,整体方法十分简洁,搜索空间设计的十分简单,基本相当于只搜索节点间的连接方式,但是效果还是挺不错的,十分值得学习 ...
- javascript 入门 select2
要说这select2,还真是我......,也不是难,反正就对不了!!! 我博客看了一下牛,愣是对不了,后来硬着头看着官方文档,终于出来了. 注意: 1.调用的jquery库一定要能用,网上很多不能用 ...
- 31.2 try finally使用
package day31_exception; import java.io.FileWriter; import java.io.IOException; import java.lang.Exc ...
- 六、路由详细介绍之动态路由RIP（了解一下就行）
动态路由分为距离矢量路由(RIP)和链路状态(OSPF和ISIS) 一.离矢量路由协议-RIP RIP协议现在基本上被淘汰. RIP动态路由协议工作原理,如上图: R12中有192.168.1.0和1 ...
- rdd简单操作
1.原始数据 Key value Transformations(example: ((1, 2), (3, 4), (3, 6))) 2. flatMap测试示例 object FlatMapTr ...
- pgsql中的lateral使用小结
pgsql中的lateral 什么是LATERAL 带有LATERAL的SQL的计算步骤 LATERAL在OUTER JOIN中的使用限制(或定义限制) LATERAL的几个简单的例子 总结 举几个我 ...
- compareAndSet() 注意点
compareAndSet()与weakCompareAndSet()是有条件的修改程序的方法,这两个方法都要取用两个参数:在方法启动时预期数据所具有的的值,以及要把数据所设定成的值.它们都只会在变量 ...