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

  • 相关阅读:
    WebService协议
    用实例揭示notify()和notifyAll()的本质区别 收藏
    深入Java集合学习系列:HashMap的实现原理
    Oracle 索引扫描的五种类型
    Spring 异常
    Spring MVC
    银行家算法
    Java内存模型与多线程
    Spring MVC之@RequestParam @RequestBody @RequestHeader 等详解
    SpringMVC单元测试之MockMVC,模拟登入用户
  • 原文地址:https://www.cnblogs.com/floud/p/12105612.html
Copyright © 2011-2022 走看看