項目根目錄
package.json：導入包的信息及scripts配置（運行npm start自動打包編譯、啓動瀏覽器、熱更新）。
{
"name": "c",
"version": "1.0.0",
"main": "main.js",
"dependencies": {
"bootstrap": "^3.4.0",
"jquery": "^3.3.1",
"mint-ui": "^2.2.13",
"vue-template-compiler": "^2.5.21"
},
"devDependencies": {
"@babel/core": "^7.2.2",
"@babel/plugin-transform-runtime": "^7.2.0",
"@babel/preset-env": "^7.2.3",
"@babel/runtime": "^7.2.0",
"babel-loader": "^8.0.4",
"babel-plugin-component": "^1.1.1",
"css-loader": "^2.1.0",
"file-loader": "^3.0.1",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"url-loader": "^1.1.2",
"vue": "^2.5.21",
"vue-loader": "^15.4.2",
"vue-router": "^3.0.2",
"webpack": "^4.28.2",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.14"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --open --contentBase dist --hot"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": ""
}
webpack.config.js：配置文件。
const path=require('path')
const htmlWebpackPlugin=require('html-webpack-plugin')
const VueLoaderPlugin=require('vue-loader/lib/plugin')
module.exports={
entry:'./src/main.js',
output:{
filename:'bundle.js',
path:path.resolve(__dirname,'dist')
},
plugins:[
new htmlWebpackPlugin({
template:path.join(__dirname,'./src/index.html'), // 指定模板頁面
filename:'index.html', // 指定生成頁面名稱，瀏覽器默認打開index.html
title:'Output Management'
}),
new VueLoaderPlugin()
],
module:{ // 配置所有第三方模塊的加載器
rules:[ // 所有第三方模塊的匹配規則
{test:/\.css$/,use:['style-loader','css-loader']}, // 加載.css文件
{test:/\.less$/,use:['style-loader','css-loader','less-loader']}, // 加載.less文件
{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}, // 加載.scss文件
{test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=58453&name=[name].[ext]'}, // 處理圖片
{test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'}, // 處理字體文件
{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}, // 配置Babel轉換高級的ES語法
{test:/\.vue$/,use:'vue-loader'} // 配置.vue文件
]
},
mode:'development' // 開發模式
}
.babelrc：babel配置文件。json格式，不能有註釋。還有按需引入mint-ui時的配置。
{
"presets":["@babel/preset-env"],
"plugins":["@babel/plugin-transform-runtime",
["component",
{
"libraryName":"mint-ui",
"style":true
}
]
]
}
LICENSE開源協議
src文件夾
lib：導入的第三方包，如mui。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
main.js：入口js文件。
App.vue
<template>
<div>
<h1>這是App組件</h1>
</div>
</template>
<script>
export default {
}
</script>
<style lang="" scoped>
</style>
router.js
import VueRouter from 'vue-router'
var router=new VueRouter({
routes:[
]
})
export default router