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 生产环境构建( ...
随机推荐
- web安全学习神器——DVWA安装部署
前言 DVWA是用PHP+Mysql编写的一套用于常规WEB漏洞教学和检测的WEB脆弱性测试程序.包含了SQL注入.XSS.文件包含等常见的一些安全漏洞.接下来我会用图文的形式讲解一下DVWA的下载与 ...
- MFC之TreeCtrl遍历所有节点
这个例子,主要是查找树上的某个节点,并展开选中它.采用来了递归方法来实现.主要用到的方法: CTreeCtrl::GetChildItemHTREEITEM GetChildItem( HTREEIT ...
- MySQL 解析 json 数组（mysql在5.7开始支持json解析）
1.函数 JSON_EXTRACT 表数据格式: 查询结果: sql 语句: -- ---------------------------- -- Table structure for json ...
- Mysql数据库卸载
Mysql数据库卸载的操作流程(Windows10): 1.停止mysql的所有服务 方法一:此电脑——管理——服务中查找到所有Mysql的服务,并停止. 方法二:cmd——net stop mysq ...
- Deep Dream模型与实现
Deep Dream是谷歌公司在2015年公布的一项有趣的技术.在训练好的卷积神经网络中,只需要设定几个参数,就可以通过这项技术生成一张图像. 本文章的代码和图片都放在我的github上,想实现本文代 ...
- C++语言实现顺序表
C++语言实现顺序表 顺序表的定义及其特点 顺序表的定义是:把线性表中的所有表项按照其逻辑顺序依次存储到从计算机存储中指定存储位置开始的一块连续的存储空间中. 这样,线性表中第一个表项的存储位置就是被 ...
- python3（三十六）StringIO BytesIO
""" StringIO和BytesIO """ __author__on__ = 'shaozhiqi 2019/9/23' # !/us ...
- 通过powershell查询OU中被禁用的AD账号，并删除他们的所属组
这个需求可以通过两个方向来实现1.找到禁用的账号,删除除domain users外的所有组,脚本内容如下 #导入AD模块import-module ActiveDirectory #被禁用户$user ...
- 用Jenkins集成ios项目设置多scheme，同一代码自动输出多个环境包 实现便捷切换API环境
Jenkins 安装使用参考我的博客http://www.cnblogs.com/zhujin/p/9064820.html Xcode 配置:说明 一个schema 对应一套环境(如生产,测试),一 ...
- 利用numpy实现多维数组操作图片
1.上次介绍了一点点numpy的操作,今天我们来介绍它如何用多维数组操作图片,这之前我们要了解一下色彩是由blue ,green ,red 三种颜色混合而成,0:表示黑色 ,127:灰色 ,255:白 ...