VUE3仿美团项目(1)-项目环境搭建

一起来学计算机

已于 2023-05-09 11:07:58 修改

阅读量360

点赞数 1

分类专栏： vue3-project 文章标签： vue.js 前端 javascript

于 2023-05-09 11:07:10 首次发布

本文链接：https://blog.csdn.net/m0_57469571/article/details/130568869

版权

vue3-project 专栏收录该内容

9 篇文章 2 订阅

订阅专栏

一、环境搭建

1.vue create meituan(项目名称)

2.选择Default ([Vue 3] babel, eslint) =====默认

3.cd meituan（项目名称）

4.npm install postcss-pxtorem@5.1.1 amfe-flexible -S ===安装rem适配

5.npm i less less-loader@7 -S

6.npm run serve ==========运行项目

二、配置文件

1.在 vue.config.js文件中配置

module.exports = {
  lintOnSave: false,
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({ rootValue: 37.5 })
        ]
      }
    }
  }
}

2.在src/main.js文件中引入

import "amfe-flexible"

三、测试

1.在src/components/HelloWorld.vue中书写代码测试less是否好用

<template>
  <div class="hello">
    <div>vue3仿美团项目</div>
  </div>
</template>
<script lang="js">
import { defineComponent } from 'vue';
export default defineComponent({
  name:'App',
  
})
</script>
<style lang="less" scoped>
    div{
      color:red;
    }
  }
</style>

2.npm run serve

这样就成功了！！！

四、遇到的错误

npm run serve

解决办法：

第一步，先卸载 sass-loader
npm uninstall sass-loader

如果卸载也报错，就执行下的代码
npm uninstall node-sass

npm uninstall sass-loader

第二步再安装一个sass@1.26.5和sass-loader@7.0.0版本
npm install sass@1.26.5 --save-dev
npm install sass-loader@7.0.0 --save-dev

第三步，使用npm run serve 依旧报错

多次查找是因为vueCli版本较高

之前的版本

正确的版本

"devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.13",
    "@vue/cli-plugin-eslint": "~4.5.13",
    "@vue/cli-service": "~4.5.13",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0"
  },