vue2搭建项目

准备

安装并生成项目

1、nodejs
2、vue-cli

// 安装
npm install -g vue-cli
// 生成项目
vue init webpack my-project

vue-cli.png

webpack配置

1、自动打开浏览器

config - index.js

autoOpenBrowser: true,
// 本质上为设置的build - webpack.dev.conf.js 中的 open:true

2、错误映射关系

config - index.js

// dev
devtool: 'cheap-module-eval-source-map', // 不用动
// build
devtool: 'cheap-module-source-map', // 可换，线上报错有提示信息

3、打包文件名及URL前缀

项目可能区分不同的端，比如PC，APP，后台管理系统，多个项目放在同一个服务器下，使用同一个域名，只是前缀不同。
config
在config文件夹下新建basePath.js文件

'use strict'
module.exports ='hotel-ecm' // 项目打包名称及URL前缀

config - index.js

const basePath = require('./basePath')
// build

// Template for index.html
index: path.resolve(__dirname, `../${basePath}/index.html`),

// Paths
assetsRoot: path.resolve(__dirname, `../${basePath}`),
// 文件夹名称,本质上为设置的build - webpack.dev.conf.js 中的 output - path
assetsSubDirectory: 'static',
assetsPublicPath: `/${basePath}/`,
// URL前缀,本质上为设置的build - webpack.dev.conf.js 中的 output - publicPath

router - index.js
如果设置了URL前缀，则路由中也需要做配置

const basePath = require('../../config/basePath')

const router = new Router({
  base: `/${basePath}/`,
  mode: 'history',
  routes: []
})

4、loader

less-loader

安装

npm install --save-dev less-loader less

安装完成后就可以使用了，不需要配置
使用
HelloWorld.vue

<style lang="less" scoped>
.father {
  .son {
    color: #00ff00;
  }
}
</style>

或者提取出来
HelloWorld.vue

<style lang="less" scoped>
@import './HelloWorld.less';
.father {
  .son {
    color: #00ff00;
  }
}
</style>

HelloWorld.less

.less-father {
    .less-son {
        color: #ff0000;
    }
}

5、axios

安装

npm install axios --save

配置

在src文件夹下新建api文件夹，在api文件夹新建http.js,api.js
http.js

import axios from 'axios'

axios.defaults.timeout = 50000

axios.defaults.baseURL = '/api/ecm/'

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
// 权限 token
axios.defaults.headers.common['Authorization'] = 'token';

// http request 拦截器
axios.interceptors.request.use(
    config => {

      return config
    },
    err => {
      return Promise.reject(err)
    }
)

// http response 拦截器
axios.interceptors.response.use(
  response => {
    if (response) {
      
    }
    return response
  },
  error => {
    
    if (error.response) {
      switch (error.response.status) {
        case 401:
          console.log('error', error.response.data)
          break                
      }
    }
    return Promise.reject(error)
  }
)

export default axios

api.js

import axios from './http'

const api = {
    // 示例
    exampleManage: {
        getMethod: params => axios.get('/get/get', { params }),
        postMethod: formData => axios.post('/post/post', formData),
        putMethod: formData => axios.put('/put/put', formData),
        deleteMethod: params => axios.get('/delete/delete', { params }),
    },
    // 权限管理
    base: {
        logout: params => axios.get('/logout', { params: params }), // 退出
        menu: () => axios.get('/index/getUserMenuList'), // 菜单
        userInfo: () => axios.get('/user/getCurrentUser'), // 用户信息
    },    
}

export default api

config - index.js

proxyTable: {
  '/api': {        
    target: 'http://10.96.80.22:8083/',
    changeOrigin: true,
    pathRewrite: {
      '^/api': '/api'
    }
  }
},

main.js

import qs from 'qs'
Vue.prototype.$qs = qs

6、moment

安装

npm install moment -S

配置

main.js

// 时间处理 示例
// const time = this.$moment(timestamp).format('YYYY-MM-DD HH:mm:ss')
import Moment from 'moment'
Vue.prototype.$moment = Moment

7、babel-polyfill

解决ie兼容性问题

安装

npm install babel-polyfill --save

配置

main.js
在最顶端引入

import 'babel-polyfill';

webpack.base.conf.js

module.exports = {
    entry: {
        app: ['babel-polyfill', './src/main.js']
    },
}

8、ui框架

iview或者element-ui

安装

npm install iview --save

npm i element-ui -S

配置

main.js

import iView from 'iview';
import 'iview/dist/styles/iview.css';
Vue.use(iView);

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

主题

src/theme -index.less

@import '~iview/src/styles/index.less';

// Here are the variables to cover, such as:
@primary-color: #fc9153;

main.js

import './theme/index.less'

build-utils

less: generateLoaders('less', { javascriptEnabled: true }),

9、样式

src/assets/css/base.css

@charset "UTF-8";

body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6, pre, code,
form, fieldset, legend, input, button,
textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}

fieldset, img {
    border: 0;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

address, caption, cite, code, dfn,
em, i, strong, th, var, optgroup {
    font-style: normal;
    font-weight: normal;
}

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}

abbr, acronym {
    border: 0;
    font-variant: normal;
}

input, button, textarea,
select, optgroup, option {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
}

code, kbd, samp, tt {
    font-size: 100%;
}

/*@purpose To enable resizing for IE */
/*@branch For IE6-Win, IE7-Win */
input, button, textarea, select {
    *font-size: 100%;
}

body {
    line-height: 1.5;
    font-family: "微软雅黑";
}

ol, ul {
    list-style: none;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

caption, th {
    text-align: left;
}

sup, sub {
    font-size: 100%;
    vertical-align: baseline;
}

/* remember to highlight anchors and inserts somehow! */
:link, :visited, ins {
    text-decoration: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

.clearfix:before, .clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both;
}

.clearfix {
    zoom: 1;
}

/*浮动*/
.fl {
    float: left;
}

.fr {
    float: right;
}

/*对齐*/
.tac {
    text-align: center;
}

.tar {
    text-align: right;
}

src/assets/css/global.less

@baseColor: #fc9153;

html,
body {
  background: #f4f5f7;
  min-width: 1200px;
  min-height: 100%;
  overflow-x: hidden;
}

main.js

import './assets/css/base.css'
import './assets/css/global.less'

10、全局变量

配置完之后，别的文件就可以使用src/assets/css/global.less中@baseColor这样的全局变量

安装

npm i sass-resources-loader --save-dev

配置

build-utils

function lessResourceLoader() {//配置less
    var loaders = [
        cssLoader,
        'less-loader',
        {
            loader: 'sass-resources-loader',
            options: {
                resources: [
                    path.resolve(__dirname, '../src/assets/css/global.less'),
                ]
            }
        }
    ];
    if (options.extract) {
        return ExtractTextPlugin.extract({
            use: loaders,
            fallback: 'vue-style-loader'
        })
    } else {
        return ['vue-style-loader'].concat(loaders)
    }
}

// 同文件，应用上述的方法
// less: generateLoaders('less'),
    less: lessResourceLoader(),

注意点

src/assets/css/global.less
less文件中不可以引用当前目录的css

11、图片

网站导航

网站导航