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
經過好長時間的折騰,終於弄出來了
新手一枚,不喜勿噴