vue脚手架（vue-cli）构建项目

一、安装工具

1. 安装webpack：使用npm全局安装webpack,打开命令行工具，输入 npm install webpack -g，安装完成之后，输入 webpack -v 即可查看当前安装版本，出现版本号说明安装成功

2. 全局安装vue-cli：在命令行输入 npm install --global vue-cli，安装完成之后，输入 vue -V查看当前版本号

二、使用Vue-cli2来构建项目

1. 新建文件夹Vue，进入文件夹，输入 vue init webpack vue-cli-test，其中vue-cli-test为新项目文件名

2. 跳入选择项来进行项目信息填写与确认

• Project name (vue-cli-test)： -----项目名称，直接回车，按照括号中默认名字（注意: 这里的名字不能有大写字母，如果有会报错Sorry, name can no longer contain capital letters）

• Project description (A Vue.js project)： ----项目描述，也可直接点击回车，使用默认名字

• Author ()： ----作者

• Runtime + Compiler: recommended for most users 运行加编译（推荐）
  Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 仅运行

• Install vue-router? (Y/n)
  是否安装vue-router，官方的路由，大多数情况下都使用，输入“y”后回车。

• Use ESLint to lint your code? (Y/n)
  是否使用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的，一般项目中都会使用。
  an ESLint preset (Use arrow keys) 选择一个ESLint预设，编写vue项目时的代码风格，直接y回车

• Setup unit tests with Karma + Mocha? (Y/n) 是否安装单元测试，选择安装y回车

• Setup e2e tests with Nightwatch(Y/n)? 是否安装e2e测试 ，选择安装y回车

3. 安装依赖环境，进入该文件目录，输入npm install
4. 运行项目，输入npm run dev

文件目录：

三、使用Vue-cli3来构建项目

1. 运行vue create hello-world命令来创建一个新项目
2. 按键盘上下键可以选择默认（default）还是手动（Manually）
   
3. 选择配置(空格键是选中与取消，A键是全选)
   TypeScript 支持使用 TypeScript 书写源码
   Progressive Web App (PWA) Support PWA 支持。
   Router 支持 vue-router 。
   Vuex 支持 vuex 。
   CSS Pre-processors 支持 CSS 预处理器。
   Linter / Formatter 支持代码风格检查和格式化。
   Unit Testing 支持单元测试。
   E2E Testing 支持 E2E 测试
   
4. 之后根据具体需求选择相应的配置
5. 安装成功后进入目录，输入npm run serve启动项目

文件目录：
3.0的目录比2.0简洁了很多，没了build和config等目录。若需要其他配置则需要自己手动配置

自定义配置

1. 全局变量的设置

在项目根目录 创建二个文件
.env.development
.env.production

#.env.development
#键值对，必须以VUE_APP开头
VUE_APP_development_URL = ‘http://xxxx.xxx.xx.xx/mockjs/’

#.env.production
#键值对，必须以VUE_APP开头
VUE_APP_production_URL = ‘http://xxxx.xxx.xx.xx/production/’

//main.js中使用
const service = axios.create({
baseURL: process.env.VUE_APP_development_URL
})

2. 代理配置webpack-dev-server

//所有 webpack-dev-server 的选项都支持
    // https://webpack.docschina.org/configuration/dev-server/
    devServer: {
        open: true,

        host: 'localhost',

        port: 3000,

        https: false,

        hotOnly: true,

        proxy: {
            '/api': {
                // 目标 API 地址
                target: 'http://192.168.1.2:8080',//开发环境
                //如果要代理 websockets
                // ws: true,
                // 将主机标头的原点更改为目标URL
                changeOrigin: true,
                pathRewrite:{
                    '^/api':'/' //这个很重要
                }
            }
        },

        before: app => {
        }
    },

在main.js 使用配置的 api

//Axios配置
Axios.defaults.baseURL = '/api/';

.vue文件中调用接口模版

this.$axios.post(//方法
'/User/GetData',//请求地址
{Data: this.$route.query.data})//参数
.then(result => {
      console.log(result);                     
})
.catch(err=>{
    console.log(err);
});

附项目的vue.config.js

详细配置可以看官方文档 详细config配置

module.exports = {
    baseUrl: '',
    outputDir: 'dist',
    //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
    assetsDir: 'static',
    //默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。如果你无法使用 Vue CLI 生成的 index HTML，你可以通过将这个选项设为 false 来关闭文件名哈希。
    filenameHashing: true,
    pages: {
        index: {
            // page 的入口
            entry: 'src/main.js',
            // 模板来源
            template: 'public/index.html',
            // 在 dist/index.html 的输出
            filename: 'index.html',
            // 当使用 title 选项时，
            // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
            title: 'Index Page',
            // 在这个页面中包含的块，默认情况下会包含
            // 提取出来的通用 chunk 和 vendor chunk。
            chunks: ['chunk-vendors', 'chunk-common', 'index']
        },
    },
    // eslint-loader 是否在保存的时候检查
    lintOnSave: process.env.NODE_ENV !== 'production',
    // 是否使用包含运行时编译器的Vue核心的构建
    runtimeCompiler: undefined,
    // 生产环境 sourceMap
    productionSourceMap: false,
    //该函数及可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
        } else {
            // 为开发环境修改配置...
            /*            var webpack = require('webpack');
                        var webpackConfig = require('./node_modules/@vue/cli-service/lib/config/dev.js');
                        var compiler = webpack(webpackConfig);

                        require('webpack-dev-middleware-hard-disk')(compiler, {
                            publicPath: webpackConfig.output.publicPath,
                            quiet: true
                        })*/
        }
    },
    //会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
    chainWebpack: (config) => {
        // 链式配置
        // var webpackConfig = require('./node_modules/@vue/cli-service/lib/config/dev.js');
        // //配置插件：添加
        // config
        //     .plugin('webpack-dev-middleware-hard-disk')
        //     .use(require.resolve('webpack-dev-middleware-hard-disk'), {
        //         publicPath:webpackConfig,
        //         quiet: true
        //     });
    },
    // 配置高于chainWebpack中关于 css loader 的配置
    css: {
        sourceMap: true,
        loaderOptions: {
            css: {
                // 这里的选项会传递给 css-loader
            },
            postcss: {
                // 这里的选项会传递给 postcss-loader
            }
        }
    },
    //所有 webpack-dev-server 的选项都支持
    // https://webpack.docschina.org/configuration/dev-server/
    devServer: {
        open: true,

        host: 'localhost',

        port: 3000,

        https: false,

        hotOnly: true,

        // proxy: {
        //     '/api': {
        //         // 目标 API 地址
        //         target: 'http://192.168.1.2:8080',//开发环境
        //         //如果要代理 websockets
        //         // ws: true,
        //         // 将主机标头的原点更改为目标URL
        //         changeOrigin: true,
        //         pathRewrite:{
        //             '^/api':'/' //这个很重要
        //         }
        //     }
        // },

        before: app => {
        }
    },
    // 构建时开启多进程处理 babel 编译
    parallel: require('os').cpus().length > 1,

    // https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    pwa: {},

    // 第三方插件配置
    pluginOptions: {
        foo: {
            // 插件可以作为 `options.pluginOptions.foo` 访问这些选项。
        }
    }
};

四、打包部署

在项目开发完成之后，使用 npm run build来打包项目，打包完成后会生成dist文件夹

附：–save-dev 与 --save 的区别：

–save 安装包信息将加入到dependencies（生产阶段的依赖）
–save-dev 安装包信息将加入到devDependencies（开发阶段的依赖），所以开发阶段一般使用它