vue-cli 3.0 初体验

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

安装步骤:

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

 Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli(1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g  卸载它。

2、通过vue --version查看版本信息,来确定是否安装成功

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

3、创建一个项目 ,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

4、切换到新创建的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':'/'
                }
            }
        }
    }
}

公众号:前端之攻略

转载于:https://my.oschina.net/u/2612473/blog/1931498

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值