vue项目杂记

vue项目杂记

文件目录结构

src
	main.js
	app.vue

package.json
webpack_config_dev.js

需要安装的包

1.	vue

	cnpm i vue --save

2.	vue-loader

	cnpm i vue-loader style-loader css-loader vue-template-compiler --save-dev

3.	webpack

	cnpm i webpack webpack-dev-server html-webpack-plugin --save-dev

main文件

import Vue from 'vue'
import App from './app.vue'

new Vue({
    el: '#app',
    render: h => h(App)
})

app文件

<template>
    <div>
        hello
    </div>
</template>

webpack_config_dev.js文件

参考地址：

https://doc.webpack-china.org/concepts/loaders/
https://github.com/jantimon/html-webpack-plugin

代码：

var HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: './src/main.js',
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: [
                    {
                        loader: 'vue-loader'
                    }
                ]
            }
        ]
    },
    plugins: [new HtmlWebpackPlugin({template: './template.html', filename: 'index.html'})]
}

package.json文件

"dev": "webpack-dev-server --progress --config webpack_config_dev.js --open --port 6008 --hot"

项目中引入mint-ui

安装：

	cnpm i mint-ui -S

main.js中导入

	import Mint from 'mint-ui'
	Vue.use(Mint)
	import 'mint-ui/lib/style.css'

之后直接用就行了

项目中引入vue-router

安装：
	
	cnpm i vue-router -S

html中:
	
	<router-link to="/home">
    	<img src="https://img08.jiuxian.com/bill/2016/0224/cccd8df26a754c139de800406af82178.png">
    </router-link> 

	<router-view></router-view>

js中：
	
	配置路径
	根实例注册

import VueRouter from 'vue-router'
Vue.use(VueRouter)

const router = new VueRouter({
    routes: [
        {
            path: '/home',
            component: Home
        }, {
            path: '/category',
            component: Category
        }, {
            path: '/cart',
            component: Cart
        }, {
            path: '/user',
            component: User
        }
    ]
})

new Vue({
    router,
    render: h => h(App)
}).$mount('#app')

重定向redirect

{
	path: '/',
    redirect: '/home'
}

vue-resource

参考地址：

https://github.com/pagekit/vue-resource

安装：

cnpm i vue-resource -S

例子：

{
  // GET /someUrl
  this.$http.get('/someUrl').then(response => {

    // get body data
    this.someData = response.body;

  }, response => {
    // error callback
  });
}

监听路由变化 watch

  watch: {
      $route(){
          this.checkUrl()
      }
  },
  methods: {
    checkUrl() {
        
    }
  }

返回上一页

this.$router.go(-1)