vue之Vue CLI

本文介绍如何使用Vue CLI全局安装,创建Vue项目,并配置关键功能如Babel、Router、Vuex和CSS预处理器。此外,还讲解了项目结构、配置Webpack、路径简化及移动端适配等使用要点。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

通过vue cli 可以快速进行vue项目的框架搭建,接下来对其搭建和使用进行简单的介绍。

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

二、创建一个vue项目
1 vue create 项目名称(比如:test)回车
2 选择手动选择功能
在这里插入图片描述
正常情况选择 babel router vuex css 就够了,其它根据情况选择(选择时按空格键)如下图:
在这里插入图片描述
3 路由选择
n代表hash y代表history 根据具体情况选择

4css选择 有以下几种,根据情况选择,一般选择node-sass 其它几种基本一样
在这里插入图片描述
5 生成package.json配置文件
在这里插入图片描述

6不保存预设,下次建项目重新配置,选择n
在这里插入图片描述

等待执行完毕…

7 cd test 切换到当前项目根目录
npm run serve 运行测试

通过 http://localhost:8081/正常打开,如下图所示,表示项目创建成功
在这里插入图片描述
三、使用要点

1 、项目整体结构介绍,如下图:
在这里插入图片描述

2 注意事项

1 如果数据是多组件共享可以使用vuex来存储数据,否则直接使用data存储即可;在使用vuex存储时,可以使用辅助函数(mapState,mapMutations,mapGetters,mapActions,具体使用可以去查看vuex文档)使代码更简洁

2 如果需要配置webpack,需要新建一个vue.config.js文件(文件名唯一,不可随意更改),具体的配置可以去vue官网查看

3 vue.config.js文件配置完毕,可以通过vue inspect > output.js,在output.js文件中对比查看一下自己的配置是否正确(这点很重要)

4 简化路径的方法:利用了webpack的链式调用,下图来自vue官网
在这里插入图片描述

chainWebpack: config => {
// 别名配置,路径的间接跳转 不需要写 ../
config.resolve.alias
   .set('assets', path.resolve(__dirname, './src/assets/'))
   .set('views', path.resolve(__dirname, './src/views/'))
}

5 移动端的适配,推荐使用插件: postcss-px-to-viewport
具体使用可以查看: vue官网介绍 npm对其使用的介绍
下面的写法可以从上面两个文档中找到

css: {
    loaderOptions: {
      css: {
        // 这里的选项会传递给 css-loader
      },
      postcss: {
        // 这里的选项会传递给 postcss-loader
        plugins: [
          new pxtovw({
            unitToConvert: 'px',
            // 这个值要根据移动端屏幕宽度来设置
            viewportWidth: 375,
            unitPrecision: 5,
            // 可以过滤某些文件不转换vw
            propList: ['*'],
            viewportUnit: 'vw',
            fontViewportUnit: 'vw',
            selectorBlackList: [],
            minPixelValue: 1,
            mediaQuery: false,
            replace: true,
            // 忽略某些文件夹
            exclude: [/node_modules/]
          })
        ]
      }
    }
  },

以上就是vue cli简单的使用,后续会继续更新。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值