vue搭建手顺
1、环境准备:node.js
vue-cli: $ npm install vue-cli -g
2、建立项目目录:vuedemo,并cd到该目录下
3、$ vue init webpack
vue-router yes
4、webstorm打开该项目
5、$ npm install axios -S
新建目录src/api,并复制api.js文件到该目录
config/index.js--01
config/index.js--02
6、$ npm install vuex -S
复制src/vuex文件夹
main.js import store from '@/vuex/store'; store
7、$ npm install element-ui -S
main.js----
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
8、$ npm install d3 --save
9、vue-router+布局
5~8安装完成之后,复制src目录
10、iconfont
dev:index.html <link rel="stylesheet" href="http://at.alicdn.com/t/font_6666666_88888888888.css">
build:main.js import './assets/iconfont/iconfont.css';
====build/utils.js
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
-----------------------
publicPath: '../../',
-----------------------
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
====config/index.js
--01--dev-----
proxyTable: {
'/api': {
target: 'http://localhost:8080/springmvc/',
changeOrigin: true, // 必须,为true的话,请求的header将会设置为匹配目标服务器的规则(Access-Control-Allow-Origin)
pathRewrite: {"^/api" : ""} //后面可以使重写的新路径,一般不做更改
}
}
--02--dev----------
port: 8888, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
--03--build----------
assetsPublicPath: './',
staticPath: './static/',
productionSourceMap: false,
====index.html
添加网站icon,设置全局样式
----------------
<link rel="shortcut icon" href="./static/xxx.ico" type="image/x-icon" />
<title>数据管理系统</title>
<style>
html,body,#app {
height: 100%;
padding: 0px;
margin: 0px;
}
</style>
====.babelrc
compact:false(不压缩)
====
src/assets/img
<img src="@/assets/img/user.png" class="el-dropdown-link"/>
static/temp
src: './static/temp/xxx/015.jpg',
------------------------
npm i prettier@~1.12.1
vue搭建手顺的更多相关文章
- vue搭建前端相关命令
Vue搭建.新建工程并打开浏览器调试的指令: 这四行命令就是我们接下来工作了. 1.npm install –global vue-cli 我们在安装好nodejs后就可以用到“npm”这个前缀指令, ...
- 深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三)
深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三) 从上面一系列的webpack配置的学习,我们现在来使用webpack来搭建vue的开发环境.首先我们来设想下我们的项目的 ...
- webpack4+Vue搭建自己的Vue-cli
前言 最近在看webpack4,深感知识浅薄,这两天也一直在思考cli的配置,借助一些别人的实践,尝试自己搭建vue的项目,这里使用webpack4版本,之前我在网上查找别人的vue项目搭建,但是都是 ...
- vue搭建骨架屏步骤配置
1.什么是骨架屏幕? 在页面加载数据之前,有一段空白时间,要么用loading加载,要么就用骨架屏. 在开发webapp的时候总是会受到首屏加载时间过长的影响,主流的解决方法是在载入完成之前显示loa ...
- 「开源」SpringCloud+vue搭建的商城项目
最近在研究SpringCloud,看到一个基于SpringCloud+vue搭建的模拟商城项目.用来辅助学习SpringCloud企业级开发还是很有帮助的.强烈推荐!! 源码地址在最后. spring ...
- .netCore+Vue 搭建的简捷开发框架 (3)-- Services层实现
继续交作业: 上一篇作业中我们实现了 Repository仓储层的应用.并为我们的框架引入了EFCore 详见: .netCore+Vue 搭建的简捷开发框架 (2)--仓储层实现和EFCore 的使 ...
- .netCore+Vue 搭建的简捷开发框架 (5)
文章目录:.netCore+Vue 搭建的简捷开发框架--目录 上两节的内容介绍了一些关于.netCore 相关的一些基础知识.介绍这些的目的,最主要的还是为了我们的架构搭建服务. 上一节中,我们介绍 ...
- .netCore+Vue 搭建的简捷开发框架--目录
.netCore+Vue 搭建的简捷开发框架 .netCore+Vue 搭建的简捷开发框架 (2)--仓储层实现和EFCore 的使用 .netCore+Vue 搭建的简捷开发框架 (3)-- Ser ...
- Vue 搭建项目
Vue 搭建项目 一.node下载安装: 1.下载:https://nodejs.org/en/download/ 2.安装默认许选择,下一步就行: 3.安装完之后就可以使用npm命令 二.通过@v ...
随机推荐
- ios--->const 用法总结
const 用法总结 宏.变量.常量区分 宏:只是在预处理器里进行文本替换,没有类型,不做任何类型检查,编译器可以对相同的字符串进行优化.只保存一份到 .rodata 段.甚至有相同后缀的字符串也可以 ...
- Oracle数据库安装与卸载
一.下载俩个压缩包,同时选中解压到一个文件夹中 二.点击step.exe(win10可能弹出不满足环境要求,选择是就行了) 三.把接收更新勾掉不需要 四.选择创建和配置数据库 五.选择服务器类 六.选 ...
- CSS 故障艺术
本文的主题是 Glitch Art,故障艺术. 什么是故障艺术?我们熟知的抖音的 LOGO 正是故障艺术其中一种表现形式.它有一种魔幻的感觉,看起来具有闪烁.震动的效果,很吸引人眼球. 故障艺术它模拟 ...
- ROS机器人之动作(一)
前面我们探讨了ros的两种通信方式,话题和服务,服务机制常用于同步的请求/响应交互方式. 话题则是单工通信,尤其是接收方有多时(比如传感器数据流),然而,当需要完成的任务比较复杂时, 服务和话题都不是 ...
- uredis ------ 异步 redis 封装的访问库(c++),基于hiredis.
详见 github : https://github.com/uniqss/uredis 底层使用hiredis库,使用libuv库. 只支持异步 支持分表分库,一般是用玩家的ID去取模,比如分库10 ...
- python笔记18(复习)
今日内容 复习 内容详细 1.Python入门 1.1 环境的搭建 mac系统上搭建python环境. 环境变量的作用:方便在命令行(终端)执行可执行程序,将可执行程序所在的目录添加到环境变量,那么以 ...
- Java.work7 访问权限、对象使用作业20194651
题目1: 在作业5的基础上,再创建一个柱体类,包含矩形对象.高和体积等三个成员变量,一个构造方法进行成员变量初始化,和计算体积.换底两个功能方法,在主类中输入长.宽.高,计算柱体体积,输入新的长.宽. ...
- HDU_1222_GCD
http://acm.hdu.edu.cn/showproblem.php?pid=1222 直接用GCD就可以了,gcd大于1表明每次一周后偏移量为0. #include<iostream&g ...
- 浅谈无线局域网WLAN
无线局域网WLAN 一.概述 有线局域网的组成如下图所示,多台计算机通过双绞线连接到一个集线器(hub)或交换机(switch)上,组成一个有限局域网. 无线局域网的组成如下图所示,多台计算机通过无线 ...
- VFP CursorAdapter 起步二(作者:Doug Hennig 译者:fbilo)
用 CursorAdapter 来取得和更新数据 在 VFP8 中新增的 CursorAdapter 基类提供一个统一.易用的数据接口.Doug Hennig 在这个月的文章中演示了怎样使用 Curs ...