Vue CLI3开发环境搭建

安装

关于旧版本

Vue CLI 的包名称由 vue-cli 改为了 @vue/cli。 若是你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你须要先经过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

---

Node 版本要求

Vue CLI 须要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。
使用如下命令安装这个新的包

npm install -g @vue/cli

安装以后，用这个命令来检查其版本是否正确 (3.x)

vue --version

建立一个项目

vue create projectname

运行如下命令来建立一个新项目：

vue create hello-world

选择默认(基本的 Babel + ESLint)配置，仍是手动配置，上下键控制
vue-cli3.0在你建立后会有一个保存当前配置的功能
由于以前建立过，提供保存配置的功能,这里选最后一个手动配置

通常不要选择eslint 检验你的代码，不然你可能会遇到不少麻烦
通常采用 vue-router（路由必备）,vuex（全家桶的状态管理器）,sass（css扩展语言）,babel(使项目可用es6)
（你的项目决定你用什么）空格多选
TypeScript
PWA
Vue-router
Vuex
CSS预处理
eslint prettier
自动化测试单元测试 、e2e

使用图形化界面配置项目

vue ui

项目目录讲解

dist 目录为 运行 npm run build 构建后的项目
main.js 为入口文件
vue.config.js 为项目配置文件

vue.config.js里
大概包括了配置 经常使用的输出路径名、跟目录、预处理、devServer配置、pwa、dll、第三方插件等等
详细配置能够看官方文档 详细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://114.55.59.209:8080',//开发环境
                // target: 'http://192.168.6.163:8080/',//域名环境
                //若是要代理 websockets
                // ws: true,
                // 将主机标头的原点更改成目标URL
                changeOrigin: true,
                pathRewrite:{
                    '^/api':'/' //这个很重要
                }
            }
        },

        before: app => {
        }
    },

在main.js 使用配置的 api

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

.vue文件中调用接口模版

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

CSS 相关

Vue CLI 项目天生支持 PostCSS、CSS Modules 和包含 Sass、Less、Stylus 在内的预处理器。

引用静态资源

全部编译后的 CSS 都会经过 css-loader 来解析其中的 url() 引用，并将这些引用做为模块请求来处理。这意味着你能够根据本地的文件结构用相对路径来引用静态资源。另外要注意的是若是你想要引用一个 npm 依赖中的文件，或是想要用 webpack alias，则须要在路径前加上 ~ 的前缀来避免歧义。更多细节请参考处理静态资源。

附上项目的vue.config.js

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://114.55.59.209:8080',//开发环境
        //         // target: 'http://192.168.6.163: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` 访问这些选项。
        }
    }
};