【学习记录14】vue3+vite+router+element+sass开发项目总结

1、用vite新建一个vue3项目

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、安装vue-router

npm install vue-router@next --save

使用vue-router@4.0+（vue-router@next）的版本配置，如下：

// 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

 main.js的配置如下：

// 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和其它的.vue文件和vue2没什么区别

目前发现的区别之一就是：

1.在vue文件中template标签里不需要套一层div标签了，如下：

3、安装element

npm install element-plus --save

全量引入

// 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')

这样引入后启动项目会报错 

[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.

解决方法：

1、安装vitejs/plugin-vue

// 在项目下安装依赖

npm install @vitejs/plugin-vue -D

2、在vue项目根目录新建文件vite.config.js,文件内容如下

// vite.config.js

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

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

3、再次启动项目错误消失，启动成功

 

 3、安装sass

npm install sass -D

 安装过程出现了各种奇葩问题

1、报错 Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin"} (current: {"os":"win32","arch":"x64"})，各种重装未解决。。。

2、后来又全局安装了sass，还是不行。。。

3、后来用yarn装了一下sass，哈哈哈。。结果项目彻底跑步起来了

4、删掉node_modules文件夹后，在package.json中手动输入了sass+版本号，在重新npm install，奇迹发生了...安装成功项目能跑起来了（我也不知道怎么就好了.......）

 在vue文件中使用全局sass变量

1.新建全局文件variable.scss，定义样式变量

$color-color: red;

2.在vue组件中使用

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

这个时候会报错 [vite] Internal server error: Undefined variable.

错误解决方法：在vite.config.js中加入css预处理器，详细看下面的代码区域

// 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";'
      }
    }
  },
})

加上上面这一段，保存，会自动编译错误消失，直接访问网页，可以看到样式生效了。