vue-cli3安装使用

vue-cli安装

使用下面的命令安装vue-cli3

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装完成,检查vue版本

vue -V

可以通过一下命令查看vue3.x对应的命令

vue --help
# OR
vue -h 

vue-cli创建项目

创建项目名为project-vue3的项目

vue create project-vue3

进入项目目录,执行以下命令

cd project-vue3
npm run serve

使用如下命令在VSCode中打开项目

code .


在浏览器中地址栏输入: http://localhost:8080/

自定义脚手架

使用以下命令创建工程vue3-cli-demo

vue create vue3-cli-demo

在这里插入图片描述
选择自己需要的选项(空格选中或取消),回车
在这里插入图片描述
在这里插入图片描述
选择y,保存刚刚的配置,完成后会在当前用户下生成一个.vuerc的隐藏文件,内容如下:
在这里插入图片描述
注意:如果要删除,不能将内容全部删除,需要保留{},否则会创建工程报错。
在这里插入图片描述

vue-cli3.0添加插件方法

例如,添加vuetify UI插件,使用如下命令

vue add vuetify

如果是普通的插件,不会对页面结构有太多的影响,还可以继续使用npm install的方法

npm install axios

全局变量的使用

在这里插入图片描述
在项目根目录下创建.env文件,添加自己的配置信息,通过process.env.环境变量名得到环境变量值。

同样,我们可以创建.env.development文件(开发环境)、.env.production文件(生产环境)

vue-cli3.0独立运行.vue文件

我们可以使用vue serve和vue build命令独立运行单个* .vue文件,但是需要先使用如下命令安装一个额外的全局插件:

npm install -g @vue/cli-service-global
# or
yarn global add @vue/cli-service-global

使用vue serve运行单个vue文件

vue serve HelloWorld.vue

vue项目管理器

使用如下命令打开图形化vue项目管理器,如下图所示:

vue ui

在这里插入图片描述
在这里插入图片描述
在项目左侧项目依赖添加项目所需要的依赖
在这里插入图片描述
搜索需要的依赖选中,在右下角安装依赖
在这里插入图片描述

vue-cli3.0配置基础的路径

项目根目录创建vue.config.js文件

module.exports = {
    baseUrl: '/', //根路径
    outputDir: 'dist',  //构建输出目录
    assetsDir: 'assets', //静态资源目录(js,css,img,fonts)
    lintOnSave: false,     //是否开启eslint保存监测,有效值: true || false || 'error'
    devServer: {
        open: true,      //打开页面
        host: 'localhost',   //域名   127.0.0.0本机    0.0.0.0真机测试
        port: '8081',     //端口号
        https: false,    //是否使用https
        hotOnly: false,  //热更新
        proxy: {
            //配置跨域
            '/api': {
                target: 'http://localhost:5000/api/',   //协议头、域名、端口号有一个不同就是跨域
                ws: true,      //是否跨域
                changOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
};

参考:webpack配置

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值