一、安装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 babel-loader@7.1 -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完整结构如下: