Vue-cli脚手架webpack模板的目录结构

以互联网小贷风控系统为例

1开发环境搭建

第一、环境准备

1）安装软件：

       1.从node.js官网下载并安装node    输入 node -v 查看版本

        2.npm包管理器，是集成在node中的，所以，直接输入 npm -v 查看版本

2）安装构建工具和脚手架：

       1.   npm install webpack -g  //安装webpack   输入 webpack -v 查看版本

       2.  npm install -g vue-cli  //安装vue脚手架 输入 vue -V 查看版本

    注意，此时V是大写

第二、构建项目

安装完成后，即可运行命令：

$ vue init <template-name> <project-name>

<template-name>：模板名称，运行npm list会显示有什么模板可以选择；

<project-name>：需要命名的项目名称；

例如运行：

       1.vue init webpack my-project   //在工作目录下生成项目my-project

       2.npm install   //在项目目录初始化npm    

第三、启动和打包

      1. npm run dev    //启动开发

       2. npm run build  //打包发布

生成的目录结构如下：

关于Vue-cli脚手架webpack模板的目录结构

|--build  //webpack相关代码文件夹
|  |--build.js //生产环境结构代码
|  |--check-version.js //检查node、npm、等版本
|  |--dev-client.js  //热加载相关代码
|  |--dev-server.js  //本地服务器
|  |--utils.js  //构建工具
|  |--webpack.base.conf.js //webpack基本配置
|  |--webpack.dev.conf.js //webpack开发环境配置
|  |--webpack.prod.conf.js  //webpack生产环境配置
|--config  //项目开发环境配置
|  |--dev.env.js  //开发环境变量
|  |--index.js  //项目基本配置（proxyTable:{ //配置请求代理}） 
|  |--dev.env.js  //开发环境变量
|  |--prod.env.js  //生产环境变量
|--dist  //执行npm run build，生成打包发布的目录 
|--node_modules  //初始化 npm install，生成的依赖包目录（注意，不要提交到svn！）
|--src  //项目源代码目录
|  |--components  //组件目录
|  |--assets  //Vue默认logo目录
|  |--router  //路由目录
|  |--APP.vue  //默认组件，入口文件
|  |--main.js  //程序入口文件，引用、加载各种组件
|--static  //静态文件目录，比如：CSS、图片、等等静态文件
|--index.html  //入口文件

Tips:一般build目录和config目录下的配置不用修改，除了在config目录下index.js配置反向代理。

下面，贴出反向代理配置：

// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')

module.exports = {
    build: {
        env: require('./prod.env'),
        index: path.resolve(__dirname, '../dist/index.html'),
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        productionSourceMap: true,
        // Gzip off by default as many popular static hosts such as
        // Surge or Netlify already gzip all static assets for you.
        // Before setting to `true`, make sure to:
        // npm install --save-dev compression-webpack-plugin
        productionGzip: false,
        productionGzipExtensions: ['js', 'css']
    },
    dev: {
        env: require('./dev.env'),
        port: 8069,
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {//配置请求代理
            '/dlsys':{
                target:'http://192.168.16.211:84',
                changeOrigin:true,
                pathRewrith:{
                    '^/dlsys': '/dlsys'
                }
            },
            '/dlapi':{
                target:'http://192.168.16.211:84',
                changeOrigin:true,
                pathRewrith:{
                    '^/dlapi': '/dlapi'
                }
            },
            '/dlbiz':{
                target:'http://192.168.16.211:84',
                changeOrigin:true,
                pathRewrith:{
                    '^/dlbiz': '/dlbiz'
                }
            }
        },
        // CSS Sourcemaps off by default because relative paths are "buggy"
        // with this option, according to the CSS-Loader README
        // (https://github.com/webpack/css-loader#sourcemaps)
        // In our experience, they generally work as expected,
        // just be aware of this issue when enabling this option.
        cssSourceMap: true
    }
}

转载于:https://my.oschina.net/hgwn/blog/1486220