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文件

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中:

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)