- 1. 新建项目
vue init webpack 项目名称
接下来一切选项都选 N
- 2. 解决打包报错问题
build文件夹下 webpack.prod.conf.js
module: {
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: false, //此处改为 false
usePostCSS: true
})
},
config文件下的 index.js
build: {
...
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './', //加个点
...
}
- 3. 兼容IE
安装
npm install babel-polyfill --save
main.js
import "babel-polyfill"
webpack.base.conf.js
module.exports = {
// entry: {
// app: './src/main.js'
// },
entry: ['babel-polyfill', './src/main.js'],
}
- 4. 路由
1) 安装
cnpm install vue-router --save
2) 使用—新建router.js
import Vue from 'vue'
import VRouter from 'vue-router'
Vue.use(VRouter)
export default new VRouter ({
routes: [
{ //重定向 打开页面后自动跳转到你定义的页面内
path: '/',
redirect:'/login'
},
{
path: '/login',
name:'login',
component: () => import('@/views/login'),
hidden: true
}
]
})
main.js
import router from '@/configs/router'
new Vue({
...,
router,
...,
})
3)预留标签
<router-view></router-view>
4)跳转
<router-link :to="'组件路径'">跳转到**页</router-link>
this.$router.push({path: '/platform/pmp'});
- 5. vuex
安装
cnpm install vuex --save
使用
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
export default new Vuex.Store({
state: {
path: ''
}
})
main.js
import store from '@/vuex/vuex'
new Vue({
...,
store ,
...,
})
调用
this.$store.state.show
- 6. Less
安装
npm install less less-loader --save
修改webpack.base.conf.js文件 增加以下代码
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
},
使用
<style lang=”less”></style>
- 7. axios
安装
npm install axios --save
main.js
import axios from 'axios'
Vue.prototype.$axios = axios
使用
this.$axios({
method: 'post',
url: 'intensive/getIntensiveList',
params: {
name: value
}
}).then((res) => {
}))
}