从零开始Vue项目构建从零开始Vue项目构建

建立项目文件夹

mkdir xxx cd xxx

建立git仓库

git inittouch .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

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