从零开始新建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/

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