1.Vue项目准备流程
-
创建项目文件project
-
在project文件夹目录下执行 npm init -y 命令,初始化package.json文件,为了以后看起来一目了然.
![在这里插入图片描述]()
-
使用npm i 命令安装项目包需要的包，这里只例举了一部分
npm i mint-ui vue-preview axios vue-router moment vue -S
- 修改package.json中的script命令脚本
"scripts": {
"dev": ".\\node_modules\\.bin\\webpack-dev-server --inline --hot --open --port 9999",
"build":"webpack"
},
- 在project文件夹目录下创建webpack.config.js配置文件
'use strict'
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
//入口
entry:{
main:'./src/main.js'
},
//出口
output:{
//所有产出资源的路径
path:path.join(__dirname,'dist'),
filename:'build.js'
},
moudle:{
loaders:[
{
test:/\.css$/,
loader:'style-loader!css-loader!autoprefixer-loader'
},
{
test:/\.less$/,
loader:'style-loader!css-loader!autoprefixer-loader!less-loader'
},
{
test:/\.(jpg|png|svg|ttf|woff|woff2|gif)$/,
loader:'url-loader',
options:{
limit:4096,//4096字节以上生成文件,否则base6
name:'[name].[ext]'
}
},
{
test:/\.js$/,
loader:'babel-loader',
options:{
presets:['es2015'],//关键字
plugins:['transform-runtime'],//函数
}
},
{
test:/\.vue$/,
loader:'vue-loader'
}
]
},
plugins:[
new htmlWebpackPlugin({
template:'./src/index.html'
})
]
}
准备工作到这里基本结束.
2.搭建项目结构
在project文件夹目录下新建src、components、static、css、img、vendor目录，以及index.html、app.vue和main.js文件.
app.vue文件可以不用放在src目录下,也可以放在components目录下.
3.运行并测试
- 编写app.vue文件.
<template>
<div>
<mt-button type="primary">测试mintUI</mt-button>
<router-view></router-view>
</div>
</template>
<script>
export default {
data(){
return{
}
}
}
</script>
<style scoped>
</style>
- 编写index.html文件.
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>信息管理系统</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
- 在components目录下新建home文件,并在里面新建home.vue文件(为了测试路由).
<template>
<div>
这里是首页
</div>
</template>
<script>
export default {
data(){
return{
}
}
}
</script>
<style scoped>
</style>
- 编写main.js文件.
'use strict'
//引入第三方包 开始
import Vue from 'vue';
import Home from './components/home/home.vue';
//引入路由
import VueRouter from 'vue-router';
//安装插件
Vue.use(VueRouter);
//Mint:引入mint-ui
import Mint from 'mint-ui';
//Mint:引入css
import 'mint-ui/lib/style.css';
//Mint:安装插件
Vue.use(Mint);
//Axios:引入axios
import Axios from 'axios';
//挂载原型
Vue.prototype.$ajax = Axios;
//默认配置
//引入第三方包 结束
//引入自己的vue文件 开始
import App from './app.vue';
//引入自己的vue文件 结束
//创建对象并配置路由规则
let router = new VueRouter({
routes:[
//配置路由规则
{path:'/',redirect:{name:'home'}},//重定向
{name:'home',path:'/home',component:Home}
]
});
//创建vue实例
new Vue({
el:'#app',
router,
render:c=>c(App)
})
- 运行项目
因为之前在package.json中修改过script命令脚本,所以在运行项目时在项目名文件所在目录下,直接执行npm run dev这条命令即可
由于在安装node_modules的时候没有指定版本号,默认安装的是最新版的,在执行的时候会出现各种报错,经过整理大部分是因为使用最新版的问题.
以下是一些报错的解决方法:
- Module parse failed: Unexpected token (2:0) You may need an appropriate loader to handle this file
- webpack.config.js配置遇到Error: Cannot find module ‘@babel/core’&&Cannot find module ‘@babel/plugin-transform-react-jsx’ 问题
- unknown property ‘loaders’.
- webpack版本问题导致webpack.config.js配置错误
End
经过好长时间的折腾,终于弄出来了
新手一枚,不喜勿喷