Vuecli 3.0自定义脚手架

一、进入项目地址 https://github.com/vuejs/vue-cli ，选择 docs目录查看具体安装流程。 中文文档：https://cli.vuejs.org/zh

可以看到我电脑上现在的脚手架版本是：

接下来要把它升级到最新版本，执行以下命令：

 二、我们创建一个项目目录 执行以下命令：

　　vue create “目录名”

会出现如下：

我们选择第二个即可。

下一步，选择要安装的插件：空格键切换选中状态

 继续：

到这一步，它问是否将以上配置保存为自定义模板，以便将来使用，选择 yue即可。

至此，它会在用户文件夹里创建一个隐藏文件 .vuerc 

今后再创建项目就会多一个模板了：

如果想删除我们自定义的脚手架模板，打开上面那个.vuerc文件，删除相应的配置即可 （蓝色部分是我创建的模板）

 

 三、安装第三方插件，以往安装插件时直接在当前项目执行 npm install axios 即可

　　现在我们安装一个最新的基于vue的UI框架，类似于Element UI，执行 vue add vuetify ，它的官网：https://vuetifyjs.com/zh-Hans/ 

　　这样添加的UI插件可以影响到项目中已存在的所有组件和页面中（即：更改我们的HTML 结构）当然也可以用npm install ‘xxx’ 来安装。

四、运行独立的 .vue 文件。意识就是一个.vue文件相当于一个.html 页面，可以独立于脚手架单独运行。

　　在根目录下创建 Hello.vue 文件，全局安装 npm install -g @vue/cli-service-global，安装后运行 vue server Hello.vue  即可。

 五、基本port配置及 跨域请求配置。

新建vue.config.js 文件,自定义webpack默认的配置。

const goods = require('./data/goods.json');
const ratings = require('./data/ratings.json');
const seller = require('./data/seller.json');

module.exports = {
    baseUrl: '/', // 根路径
    outputDir: 'dist', // 构建输出目录
    assetsDir: 'assets', // 静态资源目录(js,css,img,fonts)
    lintOnSave: false, // 是否开启eslint保存检测, 有效值: true || false || 'error'
    devServer:{
        open: true, //项目启动后是否自动打开浏览器
        host: 'localhost',  //主机
        port: 8081, //端口
        // port:"0.0.0.0", //手机真机测试端口
        https: false,
        hotOnly: false, //是否还需要热更新
        proxy: {
            // 配置跨域
            '/api': {
                target: 'http//localhost:5000/api/',
                ws: true,
                changOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        },
        // 请求本地数据，测试跨域
        before(app) {
            // http://localhost:8081/api/goods
            app.get('/api/goods', (req, res) => {
                res.json(goods);
            });
            // http://localhost:8081/api/ratings
            app.get('/api/ratings', (req, res) => {
                res.json(ratings);
            });
            // http://localhost:8081/api/seller
            app.get('/api/seller', (req, res) => {
                res.json(seller);
            });
        }
    }
}