安装

关于旧版本

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+)。你可以使用 nvmnvm-windows 在同一台电脑中管理多个 Node 版本。
使用以下命令安装这个新的包

npm install -g @vue/cli

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

vue --version

创建一个项目

vue create projectname

运行以下命令来创建一个新项目:

vue create hello-world

选择默认(基本的 Babel + ESLint)配置,还是手动配置,上下键控制
vue-cli3.0在你创建后会有一个保存当前配置的功能
因为之前创建过,提供保存配置的功能,这里选最后一个手动配置
clipboard.png

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

clipboard.png

使用图形化界面配置项目

vue ui

项目目录讲解

Vue CLI3开发环境搭建-脚本宝典
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 项目天生支持 PostCSSCSS Modules 和包含 SassLessStylus 在内的预处理器。

引用静态资源

所有编译后的 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` 访问这些选项。
        }
    }
};

本文固定链接: http://www.js-code.com/vue-js/vue-js_16583.html