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搭建手顺的更多相关文章

  1. vue搭建前端相关命令

    Vue搭建.新建工程并打开浏览器调试的指令: 这四行命令就是我们接下来工作了. 1.npm install –global vue-cli 我们在安装好nodejs后就可以用到“npm”这个前缀指令, ...

  2. 深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三)

    深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三) 从上面一系列的webpack配置的学习,我们现在来使用webpack来搭建vue的开发环境.首先我们来设想下我们的项目的 ...

  3. webpack4+Vue搭建自己的Vue-cli

    前言 最近在看webpack4,深感知识浅薄,这两天也一直在思考cli的配置,借助一些别人的实践,尝试自己搭建vue的项目,这里使用webpack4版本,之前我在网上查找别人的vue项目搭建,但是都是 ...

  4. vue搭建骨架屏步骤配置

    1.什么是骨架屏幕? 在页面加载数据之前,有一段空白时间,要么用loading加载,要么就用骨架屏. 在开发webapp的时候总是会受到首屏加载时间过长的影响,主流的解决方法是在载入完成之前显示loa ...

  5. 「开源」SpringCloud+vue搭建的商城项目

    最近在研究SpringCloud,看到一个基于SpringCloud+vue搭建的模拟商城项目.用来辅助学习SpringCloud企业级开发还是很有帮助的.强烈推荐!! 源码地址在最后. spring ...

  6. .netCore+Vue 搭建的简捷开发框架 (3)-- Services层实现

    继续交作业: 上一篇作业中我们实现了 Repository仓储层的应用.并为我们的框架引入了EFCore 详见: .netCore+Vue 搭建的简捷开发框架 (2)--仓储层实现和EFCore 的使 ...

  7. .netCore+Vue 搭建的简捷开发框架 (5)

    文章目录:.netCore+Vue 搭建的简捷开发框架--目录 上两节的内容介绍了一些关于.netCore 相关的一些基础知识.介绍这些的目的,最主要的还是为了我们的架构搭建服务. 上一节中,我们介绍 ...

  8. .netCore+Vue 搭建的简捷开发框架--目录

    .netCore+Vue 搭建的简捷开发框架 .netCore+Vue 搭建的简捷开发框架 (2)--仓储层实现和EFCore 的使用 .netCore+Vue 搭建的简捷开发框架 (3)-- Ser ...

  9. Vue 搭建项目

    Vue  搭建项目 一.node下载安装: 1.下载:https://nodejs.org/en/download/ 2.安装默认许选择,下一步就行: 3.安装完之后就可以使用npm命令 二.通过@v ...

随机推荐

  1. 同一个环境同时使用python2和python3的方法

    1.首先安装好p2和p3,配置好环境变量.在CMD内执行python返回版本号,返回结果根据配置的环境变量而定,如果p2的环境变量配置在前面,则返回p2的版本号,反之则p3 2.然后把各版本目录下的p ...

  2. Ubuntu16.04-Server固定静态IP

    1. 查看IP信息-ifconfig 2.修改配置文件---sudo vim /etc/network/interfaces  修改为静态ip 配置说明: auto ens33:使用的网络接口 ifa ...

  3. linux--->redis php扩展安装

    阿里云centos6.9下 redis php扩展安装 下载phpredis wget http://pecl.php.net/get/redis-3.1.0.tgz 或 wget https://g ...

  4. STM32 调试 24L01 心得

    大部分使用STM32开发nrf24L01的用户基本都是照搬常见的几个开发板的源代码,在这里我做一些总结: 1.源代码中在while(1)的循环中有 NRF24L01_TX_Mode();或NRF24L ...

  5. "@阅后即焚"上线了!

    前一阵发现了一个有趣的网站,他可以让你的文字在显示一次后销毁. 直到我把网站发给一个朋友,网站打不开了,于是就想着开发一个. 前端用的bootstrap这个框架,后端用PHP写的,没有后台,现在还不需 ...

  6. 为了不复制粘贴,我被逼着学会了JAVA爬虫

    整理了一些Java方面的架构.面试资料(微服务.集群.分布式.中间件等),有需要的小伙伴可以关注公众号[程序员内点事],无套路自行领取 本文作者:程序员内点事 更多精选 技术部突然宣布:JAVA开发人 ...

  7. Codeforces_708_A

    http://codeforces.com/problemset/problem/708/A 贪心,先把前面连续的一串'a'排除,再向后知道找到第一个'a',注意特殊情况. #include<i ...

  8. Codeforces 1117C Magic Ship (二分)

    题意: 船在一个坐标,目的地在一个坐标,每天会有一个风向将船刮一个单位,船也可以移动一个单位或不动,问最少几天可以到目的地 思路: 二分天数,对于第k天 可以分解成船先被吹了k天,到达坐标(x1+su ...

  9. 谈python3的封装

    这章给大家介绍,如何封装一个简单的python库 首先创建一个以下型式的文件结构 rootFile/ setup.py example_package/ __init__.py example_mod ...

  10. C++中STL库函数的基本运用

    学了这么长时间的STL库,现在我觉得是有必要对过去的题目和所遇到的问题做一下整理了,以便于之后更好的展开练习: 一. 为什么要用STL库? 1.简单粗暴(省事). 2.便于解决复杂的问题(在贪心题目中 ...