vue-cli 3.0 初体验

最近复习了下vue，忽然发现vue-cli已经更新到3.0版本了，而且变化蛮大，看来要不停的学习，真是一入前端深似海。

安装步骤：

一、全局安装 npm install -g @vue/cli

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

二、经过vue --version查看版本信息，来肯定是否安装成功

E:\vue\Vueexample3.0\new-hello>vue --version
3.0.0

三、建立一个项目 ，cd到要建立项目的文件夹，输入下面命令   

vue create new-hello

安装的过程当中会提示设置选项

 

按Enter键选择preset或者default选项，若是手动选择，按键盘的向上的箭头，而后选择下面的信息

用上下箭头移到选项行，经过空格键控制选中或者取消，所有选择好后按Enter后，会提示保存为一个未来可复用的 preset，并输入保存的preset的名称（被保存的 preset 将会存在用户的 home 目录下一个名为 .vuerc 的 JSON 文件里），等项目建立完成后，会显示下面的界面，若是咱们安装完vue-cli 3.0 后再装插件 能够用命令 

vue add router
vue add vuex

四、切换到新建立的new-hello文件夹，执行npm run serve

而后把http://localhost:8080/ 复制到浏览器中打开，不知为何不像以前的vue-cli会自动打开浏览器，ctrl+C是强制关闭服务

 

建立项目也能够经过使用图形化界面

vue ui

输入vue ui会报错，须要安装core-js，安装命令为npm install -g core-js，而后再执行vue ui 能够显示配置界面，但有一些功能按钮没有，估计是浏览器版本问题，升级了Firefox,能够正常显示

 

跨域的状况下须要把请求的地址代理的本地，方法以下：

在根目录下新建vue.config.js，把下面的代码放进去保存

module.exports = {
    devServer: {
        // 设置主机地址
        //host: 'localhost',
        // 设置默认端口
        //port: 8080,
        // 设置代理
        proxy: {
            '/api': {
                // 目标 API 地址
                target: 'http://127.0.0.1:80',
                // 若是要代理 websockets
                ws: true,
                // 将主机标头的原点更改成目标URL
                changeOrigin: true
                pathRewrite:{
                	'^/api':'/'
                }
            }
        }
    }
}

公众号：前端之攻略