[Learning Record 14] Summary of vue3+vite+router+element+sass development project

1. Create a new vue3 project with vite

1.全局安装vite
npm install -g create-vite-app

2.使用vite创建一个vue3项目
create-vite-app vue-dome

3.进入刚才创建的项目文件夹
cd vue-dome

4.npm安装依赖包
npm install

5.启动项目
npm run dev

2. Install vue-router

npm install vue-router@next --save

Use the version configuration of [email protected]+ (vue-router@next), as follows:

// router/index.js文件

import { createRouter, createWebHashHistory } from 'vue-router'

// !!!注意：.vue不能省略，否则会报错，项目不能运行，如下错误

/* 
  index.js:3 GET http://localhost:3000/src/components/Home net::ERR_ABORTED 404 (Not Found)
  vue-router.js:3293 TypeError: Failed to fetch dynamically imported module: http://localhost:3000/src/components/Home
*/

const Home = () => import('../components/Home.vue') //再次提醒：此处.vue不能省略

const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

 The configuration of main.js is as follows:

// main.js文件

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

// 增加这一行
import router from './router'

// 这一行增加.use(router)
createApp(App).use(router).mount('#app')

 app.vue and other .vue files are no different from vue2

One of the differences found so far is:

1. There is no need to set a layer of div tags in the template tag in the vue file, as follows:

3. Install element

npm install element-plus --save

Full introduction

// main.js


import { createApp } from 'vue'
// 引入element
import ElementPlus from 'element-plus'
// 引入element样式
import 'element-plus/dist/index.css'
import App from './App.vue'
import './index.css'
import router from './router'

// 在vue中引入element:[.use(ElementPlus)]
createApp(App).use(ElementPlus).use(router).mount('#app')

After this introduction, starting the project will report an error 

[vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.

Solution:

1. Install vitejs/plugin-vue

// 在项目下安装依赖

npm install @vitejs/plugin-vue -D

2. Create a new file vite.config.js in the root directory of the vue project. The content of the file is as follows

// vite.config.js

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

export default defineConfig({
  plugins: [
    vue()
  ]
})

3. Start the project again, the error disappears, and the startup is successful

 

 3. Install sass

npm install sass -D

 Various strange problems appeared during the installation process

1. Error Unsupported platform for [email protected]: wanted {"os":"darwin"} (current: {"os":"win32","arch":"x64"}), all kinds of reinstallation are not resolved . . .

2. Later, sass was installed globally, but it still didn't work. . .

3. Later, I installed sass with yarn, hahaha. . As a result, the project ran completely

4. After deleting the node_modules folder, manually enter the sass+ version number in package.json, and then re-npm install, a miracle happened...the installation is successful and the project can run (I don't know how to do it.. ......)

 Use global sass variables in vue files

1. Create a new global file variable.scss to define style variables

$color-color: red;

2. Use in vue components

<style lang="scss" scoped>
  .todoapp {
    color: $color-color;
  }
</style>

At this time, an error will be reported [vite] Internal server error: Undefined variable.

Error solution : add css preprocessor to vite.config.js, see the code area below for details

// vite.config.js

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

export default defineConfig({
  plugins: [
    vue()
  ],
// 此处是新加入的
  css: {
    // css预处理器
    preprocessorOptions: {
      scss: {
        // 引入 .scss 这样就可以在全局中使用 variable.scss中预定义的变量了
        // 给导入的路径最后加上 ; 双引号中间是文件地址对应好自己项目的路径就行
        additionalData: '@import "./src/style/variable.scss";'
      }
    }
  },
})

Add the above paragraph, save it, and the compilation error will disappear automatically. If you visit the webpage directly, you can see that the style has taken effect.