zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    【拓扑排序】【堆】CH Round #57
    【数论】【筛法求素数】【欧拉函数】bzoj2818 Gcd
    【数论】【枚举约数】【欧拉函数】bzoj2705 [SDOI2012]Longge的问题
    【暴力】vijos P1897 学姐吃牛排
    【kruscal】【最小生成树】【并查集扩展】bzoj3714 [PA2014]Kuglarz
    【set】bzoj2761 [JLOI2011]不重复数字
    【尺取法】【Multiset】bzoj1342 [Baltic2007]Sound静音问题
    【神奇の做法】bzoj2456 mode
    【博弈论】bzoj2463 [中山市选2009]谁能赢呢?
    【set】bzoj3715 [PA2014]Lustra
  • 原文地址:https://www.cnblogs.com/floud/p/12105612.html
Copyright © 2011-2022 走看看