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 生产环境构建( ...
随机推荐
- php-fpm cgi fast-cgi
基础 在整个网站架构中,Web Server(如Apache)只是内容的分发者.举个栗子,如果客户端请求的是 index.html,那么Web Server会去文件系统中找到这个文件,发送给浏览器,这 ...
- Java第二十二天，异常
异常 程序在执行过程中,出现的非正常的情况,最终会导致JVM非正常停止. 注意: 在Java等面向对象编程语言当中,异常本身是一个类,产生异常的本质就是抛出一个异常对象.Java对异常采取中断处理方式 ...
- flask 入门 之 Python Shell (二)
创建迁移仓库: 1.安装工具: pip install flask_migarte 2.代码: #encoding:utf-8 from flask_sqlalchemy import SQLAlch ...
- 在类的外面调用类的private函数
将基类中的虚函数定义为public,在派生类中将该虚函数定义为private,则可以通过基类指针调用派生类的private函数 #include <iostream> #include & ...
- Dempster–Shafer theory（D-S证据理论）初探
1. 证据理论的发展历程 Dempster在1967年的文献<多值映射导致的上下文概率>中提出上.下概率的概念,并在一系列关于上下概率的文献中进行了拓展和应用,其后又在文献<贝叶斯推 ...
- Java课程设计之——爬虫篇
主要使用的技术 Httplcient Jsoup 多线程 dao模式 网络爬虫简介 网络爬虫(又称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则,自动地抓取 ...
- input相关
input相关 在ios中输入英文首字母默认大写取消方法 <input autocapitalize="off" autocorrect="off" /& ...
- 【Java】Operator 运算符/操作符
Operator 运算符/操作符 什么是操作符? 一个表示特定的数学或逻辑操作的符号 算术运算符 加 + 减 - 乘 * 除 / 取模 % 前置自运算 ++ a .--b 后置自运算 a++ .b-- ...
- 利用Ajax实现异步请求
Ajax 1.课程引入 静态网站和动态网站都是同步的,但同步方式有缺点:页面请求响应式阻塞,影响用户体验 为了解决这个问题,可以通过变通的手段实现页面的局部更新(隐藏帧),由于隐藏 ...
- 控件：DataGridView列类型
DataGridView的列的类型提供有多种,包括有: (1)DataGridViewTextBoxColumn(文本列,默认的情况下就是这种) (2)DataGridViewComboBoxColu ...