快速构建项目vary-admin:vue+vue-router+less+webpack 4+es6
![](https://imagecloud.laixiazheteng.cn/vary-admin.png)
- 创建项目
- webpack配置
- 路由配置
- 启动项目
$ mkdir vary-admin
$ npm init
$ cd vary-admin
$ npm i vue vue-router -S
.vue
,结构如下:<template></template>
<script>
export default {
name: "v-button"
}
</script>
<style scoped></style>
template
里放置HTML代码,script
放置javascript,style
里放置CSS。<style lang="less"></style>
$ npm i vue-loader vue-style-loader less less-loader -D
webpack.common.js
)在module.rules
中添加如下代码:{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
css: 'vue-style-loader!css-loader',
less: 'vue-style-loader!css-loader!less-loader'
}
}
}
babel
:$ npm i babel babel-runtime babel-loader babel-plugin-transform-runtime babel-plugin-syntax-dynamic-import babel-preset-es2015 babel-preset-stage-3 -D
.babelrc
文件,这是babel的配置文件,添加如下代码:{
"presets": ["es2015", "stage-3"],
"plugins": ["transform-runtime", "syntax-dynamic-import"],
"comments": false
}
syntax-dynamic-import
,这是干嘛的呢?这是为了后续的按需加载路由。webpack.common.js
)中配置,我们还使用了happypack
,所以要安装:$ npm i happypack -D
...
const os = require('os');
const HappyPack = require('happypack');
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
module.exports = (env) => {
return {
...
module: {
rules: [
...
{
test: /\.js$/,
loader: 'happypack/loader?id=happybabel',
exclude: /node_modules/
}
]
},
plugins: [
new HappyPack({
id: 'happybabel',
loaders: ['babel-loader'],
threadPool: happyThreadPool,
verbose: true
})
...
]
}
}
import Vue from 'vue';
import App from '@/app.vue';
import router from "@/router";
new Vue({
el: '#root',
router,
render: h => {
return h(App)
}
});
router
绑定路由实例到Vue实例上。import Vue from 'vue';
import VueRouter from 'vue-router';
import {routers} from './router';
Vue.use(VueRouter);
// 路由配置
const RouterConfig = {
// mode: 'history',
routes: routers
};
// 创建路由实例
const router = new VueRouter(RouterConfig);
// 路由跳转前,可以在这里判断权限
router.beforeEach((to, from, next) => {
next();
});
router.afterEach((to) => { });
export default router;
3) src/router/router.js文件:
import Main from '@/views/main';
export const page404 = {
path: '404',
component: () => import('@/views/error/404')
};
export const mainRouter = [
{
path: '/',
component: Main,
redirect: '/home',
children: [
{
path: 'home', name: 'home_index', component: () => import('@/views/home/home')
}
]
}
];
export const routers = [
page404,
...mainRouter
];
在这里,我们使用了按需加载路由,所以需要相应的编译:
{
"presets": ["es2015", "stage-3"],
"plugins": ["transform-runtime", "syntax-dynamic-import"],
"comments": false
}
前面的syntax-dynamic-import
就是为这里准备的。
4. 启动项目
通过webpack-dev-server
来启动项目,搭建开发环境:
$ npm i webpack-dev-server -D
启动项目:
$ webpack-dev-server --config config/webpack.dev.js --open --watch
你可以通过命令行配置端口等,也可以在webpack中添加devServer
来配置。
终极目标
搭建一个完善的后台管理系统。
总结
Vue是一个上手较为简单的前端开发库,但要完成一个完整的项目,就需要掌握多个依赖库,比如:路由、状态管理等。如果你需要使用ES6、Less这些,就需要借助webpack的能力了。
如遇到问题或有任何疑问,可以在下方评论区留言!