vue-cli3 项目创建-配置-发布
一、使用的技术
vue-cli3
vuex
axios
采用的数据接口，easy-mock
二、初始化项目
- 首先需要安装vue-cli3,官方教程
- 初始化安装，并成功启动,
-
初始化项目默认安装router
初始化vue-cli项目.png
初始化vue-cli项目.png
vue init webpack itany
cd itany
npm install
npm install less less-loader -D //生产依赖
npm install vuex axios -S //开发依赖
npm run dev
vue
三、项目结构
- 项目文件介绍
|-- build // 项目构建(webpack)相关代码
| |-- build.js // 生产环境构建代码
| |-- check-version.js // 检查node、npm等版本
| |-- utils.js // 构建工具相关
| |-- vue-loader.conf.js // webpack loader配置
| |-- webpack.base.conf.js // webpack基础配置
| |-- webpack.dev.conf.js // webpack开发环境配置,构建开发本地服务器
| |-- webpack.prod.conf.js // webpack生产环境配置
|-- config // 项目开发环境配置
| |-- dev.env.js // 开发环境变量
| |-- index.js // 项目一些配置变量
| |-- prod.env.js // 生产环境变量
|-- src // 源码目录
| |-- assets // 静态资源
| |-- components // vue公共组件
| |-- router // vue的路由管理
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件，加载各种公共组件
|-- static // 静态文件，比如一些图片，json数据等
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .gitignore // git上传需要忽略的文件格式
|-- .postcsssrc // postcss配置文件
|-- README.md // 项目说明
|-- index.html // 入口页面
|-- package.json // 项目基本信息,包依赖信息等
- 自定义修改项目结构
|-- src // 源码目录
| |-- common // 公共的文件
| | |-- css
| | |-- js
| | |-- images
| |-- components // vue公共组件
| |-- router // vue的路由管理
| |-- store // vuex数据状态管理
| | |-- modules // 存储数据模块，每个模块都可以拥有自己的state、getters、actions、mutations
| | | |-- seller.js // 一个模块
| | |-- actions.js // 公共的方法（动作）
| | |-- getters.js // 获取公共的属性
| | |-- mutations.js // 公共的数据变化
| | |-- index.js // vuex初始化入口
| | |-- types.js // 存储方法名（大写）
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件，加载各种公共组件
|-- static
| |-- css //添加静态资源
| | |-- reset.css
项目结构
四、删除替换多余文件及代码
1、修改文件--src/App.vue
<template>
<div id="app">
<v-header></v-header>
<router-view></router-view>
</div>
</template>
<script>
import Header from './components/Home.vue'
export default {
name: 'App',
components: {
'v-header': Header
}
}
</script>
2、修改文件--router/inedx.js
- 删除路由配置
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
]
})
3、添加文件--components/Home.vue
<template>
<div>
欢迎来到我的世界
</div>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
</style>
4、删除--components/HelloWorld.vue
5、启动项目预览
snipaste20190227_115747.png
五、完善vuex结构
1、新建文件vuex--src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import actions from './actions'
import seller from './modules/seller'
Vue.use(Vuex);
export default new Vuex.Store({
getters,
actions,
modules: {
seller
}
})
2、引入vuex--src/main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/index.js'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App }
})
3、新建文件--src/store/getter.js
const getters={
}
export default getters;
4、新建文件--scr/store/types.js
const GET_SELLER = "GET_SELLER"
export default {
GET_SELLER,
}
5、新建文件--src/store/meodules/seller.js
import types from "../types"
import axios from "axios"
const state = { //数据源
seller: {}
}
const getters= { //获取数据
seller(state) {
return state.seller
}
}
const actions = { //执行发生的动作，提交一个变化
getSeller({commit,state}) {
axios.get('https://easy-mock.com/mock/5c74af248a68351906bd9aaf/example/seller').then(resp => {
// console.log(resp)
if(resp.data.success==200) {
commit(types.GET_SELLER,resp.data.seller)
}
})
}
}
const mutations= { //更新数据源
[types.GET_SELLER](state,data) {
state.seller = data
}
}
export default {
state,
getters,
actions,
mutations
}
6、修改文件--src/components/header/Header.Vue
<template>
<div class="header">
<img :src="seller.avatar" alt="altText"/>
<br>
{{seller.name}}
</div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
created () {
this.$store.dispatch('getSeller'); //执行变化，发送actions
},
computed: {
//对象展开运算符，获取seller数据
...mapGetters(['seller'])
}
}
</script>
<style lang="less" scoped>
.header {
img {
width: 64px;
height: 64px;
}
}
</style>
7、运行效果
snipaste20190227_143707.png
网友评论