一、安裝NodeJS環境
在進行vue前端項目開發中，將用到以下相關框架類庫
- Vue2.6.10
- Vuex
- VueRouter
- WebPack4
- Axios
- Ant-designer-vue
webpack是基於NodeJS環境的， 在開發之前先安裝NodeJS環境。
開發工具採用IDEA2018.8，IDEA安裝了Vue插件，JavaScript版本設置支持ES6
二、創建工程目錄
1.創建工程目錄 mkdir fire-admin，初始化工程目錄 , npm init 在項目中引導創建一個package.json文件
創建相關子目錄和文件如下
用IDEA 打開新建的工程目錄如下
三、安裝依賴包
1.安裝運行時依賴：vue、vuex、vuerouter
2.安裝運行時依賴：axios和ant-design-vue
3.安裝開發依賴：webpack。cnpm i webpack -D、cnpm i webpack-cli -D、cnpm i webpack-dev-server -D
4.安裝開發依賴：第三方 loader 加載器
- cnpm i [email protected] -D
- cnpm i file-loader -D
- cnpm i less -D
- cnpm i less-loader -D
- cnpm i css-loader -D
- cnpm i url-loader -D
- cnpm i style-loader -D
- cnpm i vue-loader -D
5.安裝開發依賴:babel
- cnpm i babel-core -D
- cnpm i babel-plugin-transform-runtime -D
- cnpm i babel-preset-env -D
- cnpm i babel-preset-stage-0 -D
6.安裝開發依賴：其他
- cnpm i html-webpack-plugin -D
- cnpm i vue-template-compiler -D
四、配置相關文件
package.json文件 配置scripts值,完整的如下
{
"name": "fire-admin",
"version": "1.0.0",
"description": "spring-boot2 and vue",
"main": "index.js",
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --hot --open --contentBase src --port 8080"
},
"author": "David Lin",
"license": "ISC",
"dependencies": {
"ant-design-vue": "^1.3.13",
"axios": "^0.19.0",
"vue": "^2.6.10",
"vue-router": "^3.0.7",
"vuex": "^3.1.1"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^3.1.0",
"file-loader": "^4.1.0",
"html-webpack-plugin": "^3.2.0",
"less": "^3.9.0",
"less-loader": "^5.0.0",
"style-loader": "^0.23.1",
"url-loader": "^2.1.0",
"vue-loader": "^15.7.1",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.38.0",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.7.2"
}
}
新建webpack.config.js 這個配置文件，內容如下
const path = require('path');
var htmlWebpackPlugin = require("html-webpack-plugin");
var VueLoaderPlugin = require("vue-loader/lib/plugin");
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
},
plugins: [
new htmlWebpackPlugin({
template: path.resolve(__dirname, 'src/index.html'),//模板路徑
filename: 'index.html'
}),
new VueLoaderPlugin()
],
module: {
rules: [
{test: /\.css$/, use: ['style-loader', 'css-loader']},
{test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
{test: /\.js$/, use: 'babel-loader', exclude: /node_modules/},
{
test: /\.(jpg|png|jpeg|gif|bmp)$/,
use: 'url-loader?limit=44706&name=[hash:8]-[name].[ext]'
},
{test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader'}, // 處理 字體文件的 loader
{test: /\.vue$/, use: 'vue-loader'}
]
}
};
新建babel配置問文件:.babelrc 內容如下
{
"presets": ["env", "stage-0"],
"plugins": ["transform-runtime"]
}
五：簡單運行
1.編寫App.vue
<template>
<div>
<h1>{{msg}}</h1>
</div>
</template>
<script>
export default {
name:'App',
data(){
return {
msg:'Hello World !'
}
}
}
</script>
<style scoped>
</style>
2.編寫main.js入口文件如下
//main.js 是項目的JS入口文件
import Vue from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue'
import Vuex from 'vuex'
import 'ant-design-vue/dist/antd.css'
Vue.config.productionTip = false
Vue.use(Antd);
Vue.use(Vuex);
var app = new Vue({
el:'#app',
render: h => h(App)
});
3.編寫index.html如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fire-admin</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>
4.執行 npm run dev
5.IDEA完整結構如下：
