搭建vue项目及基本配置(vue+webpack+axios)

前期准备

全局安装 node vue-cli

初始化项目

使用vue的脚手架直接在本地初始化项目
方法:命令行:vue init <template-name> <project-name>

template-name选项为模板名称,vue-cli官方为我们提供了5种模板。

  • webpack-一个全面的webpack+vue-loader的模板,功能包括热加载,linting,检测和CSS扩展。

  • webpack-simple-一个简单webpack+vue-loader的模板,不包含其他功能,让你快速的搭建vue的开发环境。

  • browserify-一个全面的Browserify+vueify 的模板,功能包括热加载,linting,单元检测。

  • browserify-simple-一个简单Browserify+vueify的模板,不包含其他功能,让你快速的搭建vue的开发环境。

  • simple-一个最简单的单页应用模板。

project-name 为项目名称。

这里以常用的webpack为例,
运行:vue init webpack shengyuan
在这里插入图片描述
【项目名不能大写】
结束后得到一个 shengyuan文件夹,里面大概就是这样了
在这里插入图片描述
然后当前目录命令运行:npm run dev
当看到 Compiled successfully 则表示我们的初始化到这就成功了。

修改结构

通常主要是根据项目需要在原来的基础上增删一些文件,操作下来后得到我想要的结构:(红色为修改部分)
在这里插入图片描述
接下来,我们做一个home到autoPage页的跳转。

配置路由

在router/index.js中
这里使用的是路由懒加载的方式:

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
  //滚动到顶部
  scrollBehavior(to,from,savePosition){
    return{x:0,y:0}
  },
  routes: [
    {
      path: '/',
      redirect: '/home',
    },
    {
      path: '/home',
      name: 'home',
      component: resolve=>require(['../views/home/home.vue'],resolve),
    },
    {
      path: '/autoPage',
      name: 'autoPage',
      component: resolve=>require(['../views/autoPage/autoPage.vue'],resolve),
    }
  ]
})

scrollBehavior 部分用于保证跳转到新页面时,滚动条处于顶部。
在main.js中将路由挂在在app根实例上:

import router from './router'
var app=new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

接下来
http://127.0.0.1:8080/#/autoPage
http://127.0.0.1:8080/#/home
路由切换成功生效。

配置vuex状态管理及使用

为了更灵活的控制组件间的状态,通常我们会使用vuex,并且还能管理一些固定的数据方便使用。

  • 下载vuex包
    npm i vuex -s

  • 新建store文件;
    在这里插入图片描述

  • 在store.js中

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
state: {
appName:‘demo’
},
getters: {
getState: (state) => (param) => {
return state[param];
}
},
actions: {
setState:(context,obj)=>{
context.commit(‘setState’,obj);
}
},
mutations: {
setState:(state,obj)=>{
state[obj.name]=obj.value;
}
},
modules: {
}
})

上面定义了最常用的方法setState,方便自定义修改state数据;

  • 使用方式:
    例如在home.vue中,需要将 $store.state.appName值修改;
 setAppName:function(){
            this.$store.dispatch('setState',{name:'appName',value:this.appName})
          }

效果大概就是:
在这里插入图片描述

Sass的配置使用
  • 下载包: npm i node-sass sass-loader -s
    Sass 有两种语法格式:scss(.scss)和sass(.sass)。这里的项目使用的是scss。
    具体scss的使用方式参照 sass官网文档 就好了。下面在home中使用scss,方式如下:
    在这里插入图片描述在这里插入图片描述
    到这里基本就结束了,打包 npm run build 然后本地打开试试一下,嗯…控制台报错,问题是index.html引用不到静态资源,错误如下:
    在这里插入图片描述
    在这里插入图片描述
    很明显因引用地址不对,去到config.js找到build中的assetsPublicPath,用于配置静态资源的路径,将原来的‘/’改’./'就可以了。
    在这里插入图片描述
    到这里,vue的基本搭建还有常用配置就结束了。
配置axios和全局方法

我选择 axios 主要原因主要是:

  • 使用Promise管理异步,告别传统callback方式;
  • 支持拦截器等高级配置

配置:

  • 下载axios:npm i axios qs
    这里的qs是配合axios使用,用于处理post请求的参数。(qs更多
  • 新建文件gob.js并配置为全局
    在这里插入图片描述
  • main.js中通过prototype 属性向vue对象添加属性和方法。
import Vue from 'vue'

import gob from ‘./util/gob.js’
Vue.prototype.$gob =gob;

接下来通过vue对象的$gob使用就好,例home.vue使用gob中的post方法:

<span @click="$gob.post()">调用gob的post方法</span>
  • 在gob中封装常用的post和get方法
import axios from 'axios'
import qs from 'qs'
import store from '../store/store.js'

let gob = {
//域名配置
webUrl:“后台接口IP”,
post:function(vueObj,options,newUrl){//post请求
options.arg=options.arg||{};
var ipName=’’;
!newUrl?ipName=this.webUrl:ipName=newUrl;
return new Promise(function(resolve, reject) {
axios.post(
ipName+options.url,
qs.stringify(options.arg))
.then(function (response) {
//成功逻辑
resolve(response.data);
})
.catch(function (error) {
//失败逻辑
reject(error);
});
})
},
get:function(vueObj,options,newUrl){
options.arg=options.arg||{};
var ipName=’’;
!newUrl?ipName=this.webUrl:ipName=newUrl;
return new Promise(function(resolve, reject){
axios.get(ipName+options.url,{params:options.arg})
.then(function (response) {
//成功逻辑
resolve(response.data);
})
.catch(function(error){
//失败逻辑
reject(error);
});
})
},
}

export default gob

参数说明:
vueObj 必填,主要适用于请求里面获取app这个根实例。
options 必填,格式:{url:‘xxx’,arg:{}}
newUrl 选填 用于请求的接口ip不是上面的WebUrl时,这里填另外的IP。

例:home中调用gob的post方法:

methods:{
	 postApi:function(){
            this.$gob.post(this,{url:'/getList',arg:'index:1,count:10'}).then((res)=>{
                console.log(res)
			})
          },
}

以上就是全部。

生命周期

使用vue要知道的vue的生命周期图
一个vue文件可看做一个组件,这些可嵌套可复用的组件与根实例组成一个vue应用。

配置rem

https://blog.csdn.net/github_38928905/article/details/90080956


  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用Vue全家桶+ES6+Webpack+Axios可以实现登录、注册、商品列表展示与分页、搜索、商品详情、加入购物车、查看订单详情和支付等功能的具体实现如下: 1. 登录和注册功能: - 创建登录和注册的组件,包括输入框和按钮等元素。 - 在组件中使用Vue的双向数据绑定,将用户输入的用户名和密码与组件的数据进行绑定。 - 使用Axios发送POST请求将用户输入的用户名和密码发送到后端API进行验证。 - 根据后端返回的验证结果,进行相应的处理,如跳转到首页或显示错误信息。 2. 商品列表展示与分页功能: - 创建商品列表组件,使用Axios发送GET请求获取商品列表数据。 - 将获取到的商品列表数据绑定到组件的数据中。 - 使用Vue的v-for指令遍历商品列表数据,展示商品的相关信息。 - 实现分页功能,根据用户点击的页码发送相应的请求获取对应页码的商品列表数据。 3. 搜索功能: - 在商品列表组件中添加搜索框和搜索按钮等元素。 - 使用Vue的双向数据绑定,将用户输入的关键词与组件的数据进行绑定。 - 监听用户点击搜索按钮事件,在事件处理函数中使用Axios发送GET请求,将关键词作为参数发送到后端API进行搜索。 - 根据后端返回的搜索结果进行展示,更新商品列表数据。 4. 商品详情功能: - 创建商品详情组件,接收商品ID作为参数。 - 使用Axios发送GET请求,根据商品ID获取商品详情数据。 - 将获取到的商品详情数据绑定到组件的数据中,展示商品的详细信息。 5. 加入购物车功能: - 在商品详情组件中添加加入购物车按钮。 - 监听加入购物车按钮的点击事件,在事件处理函数中使用Axios发送POST请求,将商品ID和用户ID等信息发送到后端API进行处理。 - 后端API将用户选择的商品加入购物车,并返回相应的结果。 6. 查看订单详情和支付功能: - 创建订单详情组件,接收订单ID作为参数。 - 使用Axios发送GET请求,根据订单ID获取订单详情数据。 - 将获取到的订单详情数据绑定到组件的数据中,展示订单的相关信息。 - 实现支付功能,根据用户选择的支付方式使用Axios发送POST请求,将支付相关的信息发送到后端API进行处理。 通过以上步骤的实现,您可以在Vue全家桶+ES6+Webpack+Axios的技术栈下完成登录、注册、商品列表展示与分页、搜索、商品详情、加入购物车、查看订单详情和支付等功能的开发。希望对您有所帮助!如果有任何进一步的问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值