| vue,

从零开始新建vue前端项目

假设vue-cli已经安装好。

1）vue init webpack projectname，其中projectname是新建vue项目的名称。

2）按照指引，输入作者名称和各种选项，一般选项采用默认选项即可。

3）建立成功后，可以修改本地运行接口（默认8080），即可运行测试。\node_modules\vue-loader\lib\template-compiler\index.js里面的babylon改为babel。

4）打开浏览器，输入localhost:8080，可以看到vue的默认页面。

5）引入element-ui。

通过以下命令添加element-ui依赖

npm i element-ui

修改main.js的代码，使element-ui生效，修改为如下

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' // 引入element-ui的样式文件
Vue.use(ElementUI) // 通过这个命令使所有的element-ui标签(<el-*></el-*>)可被解析

修改helloworld.vue文件，引入一个element-ui标签，修改为如下

<template>
  <div class="hello">
    <el-input v-model="msg" placeholder="请输入内容"></el-input>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  data () {
    return {
      msg: 'Welcome to Wechat'
    }
  }
}
</script>

6）引入vuex，store。

npm install vuex@3 --save

在src目录下新建store目录，新建index.js

# index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
state: {
name: '张三',
number: 0
},
getters: {
getName(state) {
return 'third ' + state.name
},
getNumber(state) {
return 'third ' + state.number
}
},
mutations: {
setName(state, payload) {
state.name = payload.name
},
setNumber(state, payload) {
state.number = payload.number
}
},
actions: {
setName(content, payload) {
return new Promise(resolve => {
setTimeout(() => {
content.commit('setName', {name: payload.name})
resolve()
}, 1000)
})
},
setNumber(content, payload) {
return new Promise(resolve => {
setTimeout(() => {
content.commit('setNumber', {number: payload.number})
resolve()
}, 2000)
})
}
}
})

export default store

 

欢迎转载，本文地址: https://blog.prodrich.com/detail/34/

带着使命来到世上的你，给他人提供价值，才有价值