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` 访问这些选项。
        }
    }
};