创建一个vue2+vue.cli4+vueRouter+elementUi+vuex项目

最新推荐文章于 2024-02-23 19:04:03 发布

祝余、

最新推荐文章于 2024-02-23 19:04:03 发布

阅读量208

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/weixin_43978427/article/details/118545950

vue 专栏收录该内容

9 篇文章

订阅专栏

这篇博客详细介绍了在Vue.js项目中如何配置和使用Sass、Element-UI、Vue Router、Vuex，以及一些实用功能，如修改项目标题、设置全局SCSS文件和引用本地图片。此外，还提供了配置Vue.config.js和使用不同版本库的方法。

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

1.创建项目

vue create demo_master

2.安装sass

npm install -D sass-loader@10.2.0 sass
// sass-loader安装最新版本运行时会报错，10.2.0是目前可正常运行最高版本
// <style lang="scss"></style> 不能写 lang=sass 会报错
// npm view sass-loader versions 查看sass-loader历史版本
// npm view xxx versions 查看xx包历史版本
// npm info xxx 查看xx包信息

3.根目录创建vue.config.js配置文件

module.exports = {}

4.安装element-ui

npm install -D element-ui

// src/main.js
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

5.安装vue-router

npm install vue-router

// src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = []
export default new VueRouter({
    routes
})
// src/main.js
+   import router from './router'
	new Vue({
+   	router,
		render: h => h(App)
	}).$mount('#app')

// src/App.vue
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

6.安装vuex

npm install vuex --save

// 新建store目录及相应文件
// src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    state: {
    },
    mutations: {
    }
})
export default store;
// src/main.js
+   import store from './store'
	new Vue({
+   	store,
		render: h => h(App)
	}).$mount('#app')
// 使用 eg
// 获取 this.$store.state.xx
// 赋值 this.$store.commit({type: 'xxx', key: value});

end 可正常运行

======================

*一些常用功能

1.修改项目标题

// vue.config.js
module.exports = {
    chainWebpack: config => {
        config.plugin('html').tap(args => {
            args[0].title = '祝余、';
            return args;
        })
    }
}

2.配置全局scss文件

// vue.config.js
// @/styles/style.scss 你的公共样式文件路径 如果是.scss文件，最后必须加';'，如果是.sass，最后不加';'
// 详细用法  https://cli.vuejs.org/zh/guide/css.html#%E5%90%91%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8-loader-%E4%BC%A0%E9%80%92%E9%80%89%E9%A1%B9
module.exports = {
    css: {
        loaderOptions: {
            sass: {
                additionalData: `@import "@/styles/style.scss";`
            }
        }
    }
}

3.引用其他样式文件

// style.scss 同目录下
@import "./_valirate.scss";

4.style引用本地图片

// eg
background: url('~@/assets/images/007Fniwgly1grozx7rn06j34tc32zx6w.jpg') center top/100% auto;
// css loader 会把非根路径的url解析为相对路径，加`~`前缀才解析为模块路径。
// 或者按相对路径写，../../assets/xxxxx 不推荐