创建vue项目，Element安装使用

一、使用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是你的项目名 然后会让你选择一些选项 然后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库代码就可以显示了。