建立项目文件夹
mkdir xxx
cd xxx
建立git仓库
git init
touch .gitignore
gi windows,linux,node,webstorm >> .gitignore
vim .gitignore
//.gitignore
.idea/
初始化生成一个新的json文件
npm init -y
安装相关模块
npm i webpack --save
npm install express --save
npm i css-loader style-loader --save-dev
npm install webpack-cli -D
建立初始文件
1.entry.js
touch entry.js
vim entry.js
//entry.js
require("!style-loader!css-loader!./style.css");
document.write("hello world");
ESC :wq
2.index.html
touch index.html
vim index.html
//index.html
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="./dist/bundle.js" charset="utf-8"></script>
</body>
</html>
ESC :wq
3.webpack.config.js
touch webpack.config.js
vim webpack.config.js
//webpack.config.js
const path = require('path');
module.exports = {
entry: './entry.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
mode:'development',
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
}
]
}
};
ESC :wq
4.style.css
touch style.css
vim style.css
//style.css
body{
background:red;
}
ESC :wq
5.server.js
touch server.js
vim server.js
//server.js
let express = require("express");
let app = express();
app.use(express.static(__dirname + '/'));
app.listen(3000,function(){
console.log("listen 3000!");
});
ESC :wq
6.往.gitignore添加内容
vim .gitignore
//.gitignore
bundle.js
7…往package.json中添加
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"webpack --mode production",
"dev":"webpack --mode development"
},
运行可运行框架1–NodeJS+Express+Webpack
terminal运行
$ npm run dev
$ node server.js
2.浏览器中打开localhost:3000
添加 nodemon 和 eslint
npm i nodemon -D
npm install eslint --save-dev
eslint --init //init .eslintrc.js
touch .eslintignore //eslint 忽略文件
//.eslintignore
node_modules/
dist/
//package.json
"scripts": {
"webpack": "webpack -d --watch",
"start": "nodemon server.js",
"eslint": "eslint --ext .js,.vue src"
}
npm run eslint
npm start
配置 babel
npm install -D babel-loader @babel/core @babel/preset-env
//webpack.config.js
const path = require('path');
module.exports = {
entry: './entry.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
mode:'development',
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /\.m?js$/,
exclude: [
// \\ for Windows, \/ for Mac OS and Linux
/node_modules[\\\/]core-js/,
/node_modules[\\\/]webpack[\\\/]buildin/,
],
loader:'babel-loader',
options: {
cacheDirectory: true,
presets: ["@babel/preset-env"]
}
}
]
}
};
安装Vue
npm i vue --save
npm i -D vue-loader vue-style-loader vue-template-compiler
mkdir public
cd public
touch App.vue
// 将index.html移动到public文件夹下
// App.vue
<template>
<div id="app">
Hello World!
</div>
</template>
<script>
export default {
name: 'app',
//数据
data(){
return {
count: 0
};
},
//组件
components: {
}
}
</script>
//webpack.config.js 将打包文件夹更改至public目录下
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
entry: './entry.js',
output: {
publicPath: '/',
filename: 'bundle.js',
path: path.resolve(__dirname, './public/dist'),
},
mode:'development',
module: {
rules: [
{
//*.vue
test: /\.vue$/,
loader:'vue-loader',
},
{
test: /\.css$/,
use: ['style-loader', 'vue-style-loader','css-loader'],
},
{
test: /\.m?js$/,
exclude: [
// \\ for Windows, \/ for Mac OS and Linux
/node_modules[\\\/]core-js/,
/node_modules[\\\/]webpack[\\\/]buildin/,
],
loader:'babel-loader',
options: {
cacheDirectory: true,
presets: ["@babel/preset-env"]
}
}
]
},
plugins:[
new VueLoaderPlugin(),
]
};
// entry.js
import './public/style/style.css'
import Vue from 'vue'
import App from './src/App.vue'
new Vue({
render: h => h(App),
}).$mount('#app')
//server.js
let express = require("express");
let app = express();
app.use(express.static(__dirname + '/public'));
app.listen(3000,function(){
console.log("listen 3000!");
});
更改.gitignore以及.eslintignore中的dist/ 改为public/dist/
运行可运行框架2 —NodeJS+Express+React+Webpack+Eslint
terminal运行
npm run eslint // 修改代码书写
npm run dev
npm start
- 浏览器打开
localhost:3000
添加 Vuex 和 MongoDB
npm i mongodb body-parser --save
npm i element-ui -S
npm install babel-plugin-component -D
mkdir server
cd server
mkdir dbs
mkdir routers
//server.js
const express = require("express");
const app = express();
const submitSignin = require('./server/routers/signIn');
const bodyParser = require('body-parser');
app.use(express.static(__dirname + '/public'));
app.use(bodyParser.json({limit: '50mb'}));
app.use(bodyParser.urlencoded({limit: '100mb', extended: true}));
app.use('/', submitSignin);
app.listen(3000,function(){
console.log("listen 3000!");
});
npm install vue-router --save
cd src
touch router.js
mkdir components
cd components
mkdir common
mkdir pages
// entry.js
import '../public/style/style.css'
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
//Vue.config.productionTip = false
Vue.use(ElementUI)
new Vue({
router,
render: h => h(App),
}).$mount('#app')
npm install vuex --save
touch store.js
import Router from 'vue-router'
import Vue from 'vue'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/error404',
name: 'Error404',
component: () => import('../views/errorPage/Error404.vue')
},
{
path: '*',
redirect: '/error404'
},
{
path: '/',
component: () => import('../views/frame/index.vue'),
children: [{
path: '',
name: 'Home',
component: () => import('../views/pages/Home.vue'),
beforeEnter(to, from, next) {
next()
}
},{
path: 'scientificResearch',
name: 'ScientificResearch',
component: () => import('../views/pages/ScientificResearch.vue'),
beforeEnter(to, from, next) {
next()
}
}
]
}
]
})
参考文章：
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
