002 搭建项目脚手架

来源：互联网发布：网络直播电视机顶盒编辑：程序博客网时间：2024/05/11 02:36

第一步：

利用vue官方脚手架vue-cli的基础上，搭建好自定义，如图所示的目录结构及所需脚手架文件。

目录：build用来存放webpack相关配置和脚本。config：主要存放配置文件，用于区分开发环境、测试环境、线上环境的不同。src项目源码及需要引用的资源文件，分为客户端与服务端。statuc不需要webpack处理的静态资源。

start.js为下项目入口文件，内容为

require('babel-register')require('./src/server')

使用npminstall安装插件。具体项目配置文件package.json内容如下（安装之前可取消node_modules文件夹webstorm索引，否则会卡）

{  "name": "firstapp",  "version": "1.0.0",  "description": "A Vue.js project",  "author": "",  "private": true,  "scripts": {    "dev": "node build/dev-server.js",    "start": "node build/dev-server.js",    "build": "node build/build.js"  },  "dependencies": {    "cors": "^2.8.4",    "vue": "^2.4.2",    "vue-router": "^2.7.0"  },  "devDependencies": {    "express-session":"~1.15.5",    "body-parser": "~1.17.1",    "cookie-parser": "~1.4.3",    "debug": "~2.6.3",    "express": "~4.15.2",    "morgan": "~1.8.1",    "serve-favicon": "~2.4.2",    "mongoose": "^4.11.10",    "sass-loader": "^6.0.2",    "axios": "^0.16.2",    "element-ui": "^1.4.3",    "autoprefixer": "^7.1.2",    "babel-core": "^6.22.1",    "babel-loader": "^7.1.1",    "babel-plugin-transform-runtime": "^6.22.0",    "babel-preset-env": "^1.3.2",    "babel-preset-stage-2": "^6.22.0",    "babel-register": "^6.22.0",    "chalk": "^2.0.1",    "connect-history-api-fallback": "^1.3.0",    "copy-webpack-plugin": "^4.0.1",    "css-loader": "^0.28.0",    "cssnano": "^3.10.0",    "eventsource-polyfill": "^0.9.6",    "extract-text-webpack-plugin": "^2.0.0",    "file-loader": "^0.11.1",    "friendly-errors-webpack-plugin": "^1.1.3",    "html-webpack-plugin": "^2.28.0",    "http-proxy-middleware": "^0.17.3",    "node-sass": "^4.5.3",    "webpack-bundle-analyzer": "^2.2.1",    "semver": "^5.3.0",    "shelljs": "^0.7.6",    "opn": "^5.1.0",    "optimize-css-assets-webpack-plugin": "^2.0.0",    "ora": "^1.2.0",    "rimraf": "^2.6.0",    "url-loader": "^0.5.8",    "vue-loader": "^13.0.4",    "vue-style-loader": "^3.0.1",    "vue-template-compiler": "^2.4.2",    "vuex": "^2.4.0",    "webpack": "^2.6.1",    "jsonwebtoken": "^7.4.3",    "webpack-dev-middleware": "^1.10.0",    "webpack-hot-middleware": "^2.18.0",    "webpack-merge": "^4.1.0"  },  "engines": {    "node": ">= 4.0.0",    "npm": ">= 3.0.0"  }}

第二步：

建立src具体的项目目录如下图

具体文件介绍和内容，随着开发逐渐介绍。然后修改

config目录的indexjs，使webpack压缩静态文件直接放入服务端的public目录进行使用

build: {  env: require('./prod.env'),  index: path.resolve(__dirname, '../src/server/public/index.html'),  assetsRoot: path.resolve(__dirname, '../src/server/public'),

以上脚手架完整目录如下图：

阅读全文

0 0