移动端找房项目笔记（一）--项目配置## 1.项目目录创建 2.css样式重置 1.对默认样式进行重置，安装 norma

1.项目创建

1. 方式一： Vue CLI

基于webpack工具；
命令： vue create

如果遇到问题，按下面步骤先执行。

安装或升级脚手架

需要保证vue cli版本在4.5.0以上才可以使用vue3，vue -V可以查看下vue cli的版本，在4.5.0以下的就可以执行下行命令升级版本。

npm install -g @vue/cli

创建vue项目

项目名自己起，我这里用的是vue create vue3-project

vue create 项目名

2. 方式二： create-vue

基于vite工具；
命令： npm init vue@latest

3. 使用vite 创建项目

npm init vite@latest

也可以使用npm create vue@latest这一指令创建项目，将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具

3. 项目配置:

配置项目的icon
配置项目的标题
配置jsconfig.json

4. 目录结构

5. 添加`jsconfig.json`让vscode有更友好的提示。

{
    "compilerOptions": {
      "target": "es5",
      "module": "esnext",
      "baseUrl": "./",
      "moduleResolution": "node",
      "paths": {
        "@/*": [
          "src/*"
        ]
      },
      "lib": [
        "esnext",
        "dom",
        "dom.iterable",
        "scripthost"
      ]
    },
    "vueCompilerOptions": {
      // "experimentalDisableTemplateSupport": true
    }
  }

6.创建代码片段

网址

7. 安装less

生产环境加-D

npm install less -D

功能描述：引入SCSS和LESS的主要功能如下：

变量和嵌套：SCSS和LESS允许使用变量和嵌套语法，提供更灵活和可复用的样式定义。
Mixin和函数：通过Mixin和函数的使用，可以在样式中实现更高级的逻辑和重用。
导入其他文件：可以使用@import指令引入其他SCSS或LESS文件，提高代码的模块化和可维护性。

使用方法：以下是在Vue 3项目中引入SCSS和LESS的基本步骤：

安装依赖：

scss

# 使用 npm 安装
npm install sass

# 或使用 yarn 安装
yarn add sass

LESS：使用npm或yarn安装less依赖。

# 使用 npm 安装
npm install less

# 或使用 yarn 安装
yarn add less

配置构建工具：

Vue CLI：如果使用Vue CLI创建项目，无需进行其他配置，已经内置了对SCSS和LESS的支持。
Vite：如果使用Vite构建项目，需要安装相应的插件并进行配置。
对于SCSS，安装 @vitejs/plugin-sass 插件。

npm install @vitejs/plugin-sass --save-dev

对于LESS，安装 vite-plugin-less 插件。

npm install vite-plugin-less --save-dev

在 vite.config.js 文件中添加插件配置。

// 对于SCSS
import { defineConfig } from 'vite';
import { createVuePlugin } from 'vite-plugin-vue2';
import { vitePlugin as VitePluginSass } from 'vite-plugin-sass';

export default defineConfig({
  plugins: [
    createVuePlugin(),
    VitePluginSass()
  ]
});

// 对于LESS
import { defineConfig } from 'vite';
import { createVuePlugin } from 'vite-plugin-vue2';
import { createVuePlugin as VitePluginLess } from 'vite-plugin-less';

export default defineConfig({
  plugins: [
    createVuePlugin(),
    VitePluginLess()
  ]
});

2.css样式重置

1.对默认样式进行重置，安装 normalize.css

npm install --save normalize.css
在main.js中import "normalize.css"//重置css样式

2.配置reset.css文件

body,h1,h2,h3,h4,ul,li {
  padding: 0;
  margin: 0;
}
ul,li {
  list-style: none;
}
a {
  text-decoration: none;
  color: #333;
}
img {
  /* 设置元素的垂直排列的.用来定义行内元素的基线相对于该元素所在行的基线的垂直对齐
vertical-align常用属性值
baseline：默认值，元素放置在父元素的基线上。
top：把元素的顶端与行中最高元素的顶端对齐；
middle：把此元素放置在父元素的中部。
bottom：把元素的顶端与行中最低的元素的顶端对齐。
    */
  vertical-align: top;
}

3.配置common.css

body{
    font-size: 14px;
    font-family: 'Courier New', Courier, monospace;
}

4.主题颜色以及使用

3.配置路由

1.在router下index.js文件中配置路由

import { createRouter, createWebHashHistory } from "vue-router";

const router = createRouter({
    history: createWebHashHistory(),
    // 映射关系：path-->component
    routes: [
        {
            path: '/',
            redirect: "/home",
        },
        {
            path: "/home",
            component: () => import("@/views-(视图)/home/home.vue"),
        },
        {
            path: "/favor",
            component: () => import("@/views-(视图)/favor/favor.vue"),
        },
        {
            path: "/order",
            component: () => import("@/views-(视图)/order/order.vue"),
        },
        {
            path: "/message",
            component: () => import("@/views-(视图)/message/message.vue"),
        }
    ]
})

// 导出路由
export default router

2.main.js中配置 .use(router)

import { createApp } from 'vue'
import App from './App.vue'
import router from './router-(实现url与组件对应)'
import "normalize.css"//重置css样式
import "./assets/css/index.css"//引入css样式

createApp(App).use(router).mount('#app')

3.app.vue中router-view占位

<template>
  <div class="app">
    <router-view />
    <router-link to="/home">首页</router-link>
    <router-link to="/favor">收藏</router-link>
    <router-link to="/order">订单</router-link>
    <router-link to="/message">消息</router-link>

  </div>
</template>
<script setup>

</script>
<style scoped></style>

4.状态管理

1.安装pinia

npm install pinia

2.在stores下index.js进行配置

import { createPinia } from "pinia";
const pinia=createPinia();
export default pinia;

3.在main.js导入

import pinia from './store-(状态管理)'//导入pinia

createApp(App).use(router).use(pinia).mount('#app')

5.Van4的配置

1.安装 vant

# Vue 3 项目，安装最新版 Vant
npm i vant

# Vue 2 项目，安装 Vant 2
npm i vant@latest-v2

2.在vite.config.js中，配置如下

安装插件：

 通过 npm 安装 npm i unplugin-vue-components -D

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// vant配置
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),
    // vant配置
  Components({
    resolvers: [VantResolver()],
  }),],

  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

6.其他配置

1. 浏览器自动打开

在package.json里面配置 --pen

"scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

在vue.config.js里面配置

  devServer: {
  host: 'localhost',
  port: 8080,
  }

2. 关闭eslint校验功能关闭vue.config.js。

lintOnSave: false,

3. js.config.json 配置文件别名

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  }
}

移动端找房项目笔记（一）--项目配置