创建vue项目，Element安装使用

最新推荐文章于 2023-06-28 00:28:41 发布

原创最新推荐文章于 2023-06-28 00:28:41 发布 · 288 阅读

1 ·

CC 4.0 BY-SA版权

本文详细介绍了如何使用Webpack构建Vue项目，包括环境搭建、项目构建、状态管理器Vuex的使用，以及如何安装和集成ElementUI，实现组件按需加载。

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

一、使用webpack搭建vue项目

1.环境搭建

1.1安装node.js

打开node官网，下载，安装过程很简单，一路“下一步”就可以了。（我使用的是10版本）
安装好之后，cmd输入 node -v 出现版本号证明安装成功
在这里插入图片描述
不建议修改为淘宝镜像，会出现你意想不到的bug。
tip:不要在11.40-12.30安装node以及依赖，会少很多东西，神奇！

1.2安装webpack

npm install webpack -g
安装成功后 webpack -v 出现版本号

1.3安装vue-cli脚手架构建工具

npm install vue-cli -g
安装成功后 vue -V 出现版本号

2.构建项目

新建一个文件夹，在文件夹中打开cmd
vue init webpack myproject //myproject是你的项目名
然后会让你选择一些选项
vue-router选择是
然后cd myproject 进入你的项目，输入npm run dev
出现：
在这里插入图片描述
然后在浏览器中输入地址，出现vue的logo，就好啦嘻嘻

3.写项目

1.首先删掉一些没必要的组件，components中的hello world
在router/index.js中删掉引入的以及配置好的。在app.vue中删掉引入的<img …>
2.在src文件夹中新建一个pages文件夹，用来存放页面
在这里插入图片描述
在router/index.js中引入：

import Vue from 'vue'
import Router from 'vue-router'
import CompanyChangeAddress from '@/pages/companyChangeAddress'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: '',
      component: CompanyChangeAddress
    }
  ]
})

打开浏览器，此时就是你新建的页面

安装axios

npm i axios -S
axios 的封装：详见下一篇博文

反向代理（解决跨域问题）

详见博文：链接: link.

在config/index.js
    proxyTable: {
        "/api": {
            "target":"http://........",
            "changeOrigin":true,
            "pathRewrite": {
            "^/api":""//api相当于一个别名
            }
          },
         "/ele": {
             "target":"http://.....",
             "changeOrigin":true,
             "pathRewrite": {
             "^/ele":""//api相当于一个别名
             }
           }
    },

配置文件的修改一定要修改服务器！！！

4.使用状态管理器vuex

安装：npm install vuex --save
在src文件夹下新建一个store.js文件，用来存放共享的数据

import Vue from 'vue';
import Vuex from 'vuex';
import axios from './api/index.js'
Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        name: 'aaaa'
    },
    mutations: {//唯一改变数据的地方
        setName(state, newName) {
            state.name = newName;
        }
    },
    actions: {//通过页面去触发action,提交给mutations
        aaaName({commit}, newName) {
            commit('setName', newName)
        }
    }
});

页面的index.vue中

import {mapState, mapActions} from 'vuex';//引入辅助函数
export default{
	data(){
		return{
			newName:'heihei'//也可通过事件改变这个值或mounted中
		}
	},
	computed:{//计算属性
		...mapState(['name']),//store中的state
		//或者
		xName(){
        return this.$store.state.name
      },
	},
	methods:{
		...mapActions(['aaaName']),//action名与store中定义的一致
        changenewcardId() {//通过事件去触发action,绑定在谁身上的事件都可以
        	this.newName="hah"
            this.cccName(this.newName)
        }
	}
}

5.遇到的问题：

5.1模块未找到：

在这里插入图片描述
写的路径有问题，所以模块找不到。

二、安装Element ui：

npm i element-ui -S

按需引入：

npm install babel-plugin-component -D
然后，将 .babelrc 修改为：

"plugins": ["transform-vue-jsx", "transform-runtime", [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
 ]],

接下来，如果你只希望引入部分组件，在 main.js 中写入

import Vue from 'vue'
import { Button, Select } from 'element-ui'
 Vue.use(Button)
 Vue.use(Select)

全局配置:在引入 Element 时，可以传入一个全局配置对象。该对象目前支持 size 与 zIndex 字段。size 用于改变组件的默认尺寸，zIndex 设置弹框的初始 z-index（默认值：2000）
按需引入：

Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 }

然后我们复制ui库代码就可以显示了。