从零开始Vue项目构建

建立项目文件夹

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


    

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

1. terminal运行

$ npm run dev
$ node server.js

2.浏览器中打开localhost:3000

index.html

添加 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

//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

1. terminal 运行

npm run eslint  // 修改代码书写
npm run webpack 
npm start

2. 浏览器打开 localhost:3000
   
   

   index.html

添加 Vuex 和 MongoDB

---

参考：

1. webpack打包WARNING in configuration The 'mode' option has not been set
2. webpack5 load css