vue2.0+webpack+vuerouter+vuex+axios构建项目基础

前言

本文讲解的是vue2.0+webpack+vuerouter+vuex+axios构建项目基础

步骤
1、全局安装webpack,命令
npm install webpack -g

注意,webpack升级到4舍弃了不少组件,之前有次使用淘宝镜像丢失了不少模块,所以webpack大家尽量使用npm装。

2、安装vue脚手架
npm install vue-cli -g
3、运行cmd(开始-运行-cmd-回车)

比如你的目录要安装在E盘,在命令面板中就输入"e:"然后回车
cd到项目的指定目录

4、根据模板创建项目,命令
vue init webpack-simple 工程名字<工程名字不能用中文>

Project name 输入项目名称直接回车默认,其他的直接回车。

5、安装依赖
npm install

创建好的类目如下图所示

image.png

6、运行第一个vue项目,命令
npm run dev

image.png

运行完后会运行项目,并打开浏览器展示这个例子项目

7、安装vue-router,vuex,axios

axios相当于ajax,之前是用vue-resourse,不过现在这个模块不维护了,基本使用axios
vue-router是vue的路由
vuex是vue的状态管理,方便组件间通信
安装命令

npm install vue-router vuex axios --save-dev

会保存到package.json文件里,当代码上传别人下载后,可以使用npm install一次性把依赖全部装完

8、书写第一个组件

在src目录下新建一个component文件夹,新建组件文件firstcomponent.vue
firstcomponent.vue

<template>
    <div id="firstcomponent">
        <h1>第一个组件</h1>
        <a href="javascript:void(0);">write by {{author}}</a>
    </div>
</template>
<!-- the js -->
<script type="text/javascript">
    export default{
        data(){
            return {
                author:‘yueziming‘
            }
        }
    }

</script>

<!-- the vue style-->
<style lang="scss">

</style>

<style lang="scss">在里面可以直接写sass语法,书写更快捷

9、使用组件

app.vue部分代码

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>{{ msg }}</h1>
    <firstComponent></firstComponent>    <!--使用组件-->
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>
      <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
  </div>
</template>

<script>
import firstComponent from ‘./component/firstcomponent.vue‘;    //引入组件
export default {
  name: ‘app‘,
  data () {
    return {
      msg: ‘Welcome to first Vue.js Project‘
    }
  },
  components:{firstComponent}    //注册组件
}
</script>
10、使用路由和vuex

1、先写入secondcomponent.vue这个组件,然后在main.js里面引入(加入代码)

import Vue from ‘vue‘
import App from ‘./App.vue‘
import VueRouter from ‘vue-router‘
import Vuex from ‘vuex‘
// import VueResource from ‘vue-resource‘

//开启debug模式
Vue.config.debug = true;
Vue.use(VueRouter);
Vue.use(Vuex);
// Vue.use(VueResource);Y
const First  = { template:‘<div><h2>{{count}}</h2></div>‘,computed:{count(){return store.state.count}}};
import Second from ‘./component/secondcomponent.vue‘;

const router = new VueRouter({
  mode: ‘history‘,
  base: __dirname,
  routes: [
    {
      path: ‘/first‘,
      component: First
    },
    {
      path: ‘/second‘,
      component: Second
    }
  ]
})

const store = new Vuex.Store({
  state:{
    count:0
  },
  mutations:{
    increment(state){
      state.count++;
    }
  }
})    

store.commit(‘increment‘);

console.log(store.state.count) // -> 1

const app = new Vue({
  el: ‘#app‘,
  router:router,
  store,
  render: h => h(App)
}).$mount(‘#app‘);

注:在app.vue里面写入html路由代码,切换路由后组件会在这里展示

<router-link to="/first">点击跳到第一个路由</router-link>
<router-link to="/second">点击跳到第二个路由</router-link>
11、在secondcomponent.vue里使用vuex里面的数据

secondcomponent.vue

<template>
    <div id="firstcomponent">
        <h1>{{count2}}</h1>
        <a href="javascript:void(0);">write by {{author}}</a>
    </div>
</template>
<!-- the js -->
<script type="text/javascript">
    export default{
        data(){
            return {
                author:‘yueziming‘,
                count2:this.$store.state.count
            }
        }
    }
</script>

<!-- the vue style-->
<style>

</style>

count2就是main.js里面的count

12、axios的使用

axios的使用格式为:
axios.get(‘/user‘,{
params:{
ID:12345
}
})
.then(function(response){
console.log(response);
})
.catch(function(err){
console.log(err);
});
get没有区别,但是post请求时后台接收不到数据
简单的给下我封装的axios解决post的方法

import esPromise from ‘es6-promise‘;
import axios from ‘axios‘;
import qs from ‘qs‘;

esPromise.polyfill();

axios.defaults.timeout = 30000;  //设置超时时间30秒
// axios.defaults.headers.common[‘Authorization‘] = AUTH_TOKEN;
axios.defaults.headers.post[‘Content-Type‘] = ‘application/x-www-form-urlencoded;charset=UTF-8‘;           //配置请求头

axios.defaults.baseURL = ‘http://172.1.1.1‘;

 //POST传参序列化
axios.interceptors.request.use((config) => {
    if(config.method  === ‘post‘){
        config.data = qs.stringify(config.data);
    }
    return config;
},(error) =>{
     console.log("错误的传参");
    return Promise.reject(error);
});

class Common{
    constructor(){

        }
    }
    ajaxLoading(){
        let loading = document.createElement("div");
        loading.setAttribute("id","loading");
        loading.setAttribute("class","mask-loading");
        let myBody = document.getElementsByTagName("body")[0];
        myBody.appendChild(loading);
        loading.innerHTML = ‘<div class="spinner"><div class="spinner-container container1"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div><div class="spinner-container container2"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div><div class="spinner-container container3"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div>加载中</div>‘;
    }
    ajaxLoadingStop(){
        let loading = document.getElementById("loading");
        loading .parentNode.removeChild(loading );
    }
    ajax(api,data,callBack){
        let myData = data;
        let self = this;
        if(api.type == "get"){
            self.ajaxLoading();
            axios.get(api.url,{
                params:myData.list
            }).then((response)=>{
                self.ajaxLoadingStop();
                if (response.data.ResultCode == 6666) {
                    callBack && callBack(response.data);
                }  else {
                    prompt.tip(response.data.Message);
                }
            }).catch((error)=>{
                self.ajaxLoadingStop();
                if(error && error.message && error.message.indexOf(‘timeout‘)!=-1){
                    prompt.tip("访问超时");
                }else{
                    prompt.tip("服务器通信异常");
                }
            })
        }else{
            self.ajaxLoading();
            new Promise((resolve, reject) => {
                axios.post(api.url,myData.list).then((response)=>{
                    self.ajaxLoadingStop();
                    if (response.data.ResultCode == 6666) {
                        callBack && callBack(response && response.data)
                    } else {
                        prompt.tip(response.data.Message);
                    }
                }).catch((error)=>{
                    console.log(error);
                    self.ajaxLoadingStop();
                    if(error && error.message && error.message.indexOf(‘timeout‘)!=-1){
                        prompt.tip("访问超时");
                    }else{
                        prompt.tip("服务器通信异常");
                    }
                })
            })
        }
    }
}
export default Common;

这只是最简单的例子,供给大家入门,能搭出来后面就容易学

原文地址:https://www.cnblogs.com/navysummer/p/11562140.html

时间: 2024-10-12 18:04:20

vue2.0+webpack+vuerouter+vuex+axios构建项目基础的相关文章

一步步构造自己的vue2.0+webpack环境

前面vue2.0和webpack都已经有接触了些(vue.js入门,webpack入门之简单例子跑起来),现在开始学习如何构造自己的vue2.0+webpack环境. 1.首先新建一个目录vue-wkdemo,这是我们的项目目录.执行 npm init 命令生成package.json文件.执行npm init之后,会提示你填写一些项目的信息,一直回车默认就好了,或者直接执行 npm init -y 直接跳过询问步骤. 2.安装项目依赖项 npm install webpack webpack-

react工程化项目搭建主流技术 umi3.0(或者&lt;3.0版本)+ dva + antd构建项目流程

umi+ dva + antd构建react工程项目(组件化开发搭建项目)1.官方网站安装node.js(并确保 node 版本是 10.13 或以上)2.先确保安装成功npm或者yarn3.npm i yarn tyarn -g (国内源)4.如果你没有 npx,需要先安装它,用于执行 node_modules 下的命令 yarn global add npx5.开始构建项目先区分版本: umi 3.0后也就是目前最新版本 mkdir myapp && cd myapp (新建建个项目目

vue全家桶(Vue+Vue-router+Vuex+axios)(Vue+webpack项目实战系列之二)

Vue有多优秀搭配全家桶做项目有多好之类的咱就不谈了,直奔主题. 一.Vue 系列一已经用vue-cli搭建了Vue项目,此处就不赘述了. 二.Vue-router Vue的路由,先献上文档(https://router.vuejs.org/zh-cn/). 路由在全家桶里面定位是什么呢,创建单页应用!简单!我们知道Vuejs是一系列的组件组成应用,既然是组件那么就需要组合起来,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们! 我们一般在

初学vue,vue2.0+vue-router+vuex的小项目

名字:Todos 功能:待办事项的增删改查,学习vuex的思想,充分使用了mountain和action,引入了charts 做的图表分析,支持拖拽排序和滑动设置 说明:因为没有时间搭建后台服务,直接用的locaStroge做的数据存储,也就没有用到axios,设置页面本来想做个数据导出和导入,现在也没做 ui框架用的是 vux,yd-ui,mint-ui 自己懒得写样式,就只好全用别人家的咯 别人家的不全,就只好多用几家喽 地址:https://github.com/zhaowanhua/To

vue全家桶(Vue+Vue-router+Vuex+axios)(Vue+webpack项目)

1.Vue.cli   脚手架 全局安装 cli npm install --global vue-cli 查看安装结果 vue -V 创建基于webpack的名为myindex的新项目 vue init webpack myindex 切换到项目 cd myindex 安装依赖 npm install 起飞 npm run dev 原文地址:https://www.cnblogs.com/chydream/p/10513192.html

Vue2.0笔记——vue-router路由

简介 使用Vue.js开发SPA(Single Page Application)单页面应用.vue-router可以通过html5的history API或者hash实现单页应用,即不刷新跳转,切换地址,只是页面上的组件的切换:vue-router可以实现页面间传参等其他功能: 基本用法 当你要把 vue-router 添加进来,我们需要做的是,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们. 首先我们需要定义链接url,而vue-ro

一步步构造自己的vue2.0+webpack环境9iuxpl

谩闭圯缛 ㄌ闯慌蝠 功德一名心腹扈从对谍子许浑虎视眈眈.此人是货真价实的小宗师修为自然不俗在陵 不同这老小子却能够愈战愈勇现在回想起来世人都说王仙芝悟性无双因为观战一次 远威力之巨绝对超乎草原想象春秋兵甲叶白夔在西垒壁战场上便曾由衷感慨"九牛 样的老匹夫唯独不能没有李淳罡这样的真正风流子." 堕轫 慰镑菰 ③圬≤ 错等我跟王仙芝一战之后你我之间也该有个了断了." 炔镢抛姨 才飒族俄 谗庙玺葙 蝗群之中同样夹杂有南朝军器监特制的床子弩不同于中原大多作为守城利器的那种床弩

vue2.0使用vue-router传参数

main.js中 对应网站地址(比如说通过a标签的href跳转):http://localhost:8080/apple/red/detail/3 在apple.vue中可以这样获得参数:

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十三║Vue实战:Vuex 其实很简单

系列教程一目录:.netcore+vue 前后端分离 系列教程二目录:DDD领域驱动设计 系列教程三目录:Nuxt.js TiBug系统 系列教程四目录:VueAdmin 后台管理系统 系列教程五目录:IdentityServer4 授权服务器 本文梯子 前言 零.今天要完成实战1中的红色部分 一.常见的 Vue 表单提交是如何设计的? 1.表单.按钮等在一个组件内 2.按钮在父组件.表单在单独的子组件内 二.通过 $emit 修改父组件数据 1.在原来代码里 About.vue 修改成 For