电商平台项目 Vue day1

kin0926

已于 2023-02-04 17:47:07 修改

阅读量725

点赞数

分类专栏：电商平台文章标签： 1024程序员节 vue.js 前端 vscode

于 2022-11-05 18:36:29 首次发布

本文链接：https://blog.csdn.net/weixin_50511197/article/details/127488849

版权

电商平台专栏收录该内容

10 篇文章 2 订阅

订阅专栏

开始之前需要确保自己的电脑上有

node.js环境（npm包管理器）
Node.js <—点击链接下载，一直下一步。
vue-cli 脚手架构建工具
npm install -g @vue/cli

1、在cmd里通过vue-cli创建脚手架,格式：vue create 项目名


脚手架介绍：

node_modules:放置项目依赖的地方

public:放置一些共用的静态资源，打包上线的时候，public文件夹里面资源原封不动打包到dist文件夹里面

  --pubilc/index.html是一个模板文件，作用是生成项目的入口文件

src：程序员源代码文件夹

  --assets文件夹：经常放置一些静态资源（图片），assets文件夹里面资源webpack会进行打包为一个模块（js文件夹里面）

  --components文件夹:一般放置非路由组件（或者项目共用的组件）
  --pages文件夹：放置路由组件
  --router文件夹：配置路由

App.vue 唯一的根组件

main.js 入口文件【程序最先执行的文件】

 babel.config.js:babel配置文件
 package.json：看到项目描述、项目依赖、项目运行指令
 package-lock.json: 缓存性文件（各种包的来源）
 README.md:项目说明文件

2、脚手架下载下来的项目稍微配置一下

2.1:运行代码后，自动打开浏览器

        在package.json文件中serve后加上--open

        "scripts": {

         "serve": "vue-cli-service serve --open",

          "build": "vue-cli-service build",

          "lint": "vue-cli-service lint"

        },

2.2关闭eslint校验工具，不然浏览器控制面板会经常爆红

    创建vue.config.js文件：需要对外暴露

     module.exports = {

       lintOnSave:false,

    }

3、确认项目结构：上中下 ----上下是非路由组件、中间部分是路由组件

2个非路由组件|四个路由组件

两个非路由组件：Header 、Footer

路由组件:Home、Search、Login（没有底部的Footer组件）、Register（没有底部的Footer组件）

4、写好非路由组件之后在App.vue里面进行三件套：

1：引入组件（以header为例）

import HeaderVue from './components/Header.vue';

2：注册组件，在export default { }里，和data同级

components: { HeaderVue, }

3:使用组件

<HeaderVue></HeaderVue>

5、安装路由和配置路由组件

npm install --save vue-router@3 （也可以用淘宝镜像cnpm，vue2用@3）

--save:可以让你安装的依赖，在package.json文件当中进行记录

5.2创建路由组件【一般放在views|pages文件夹】

5.3在router文件夹配置路由，配置完四个路由组件，（还要给首页路由组件添加一个重定向）

// 专门用于创建整个项目的路由器
import Vue from 'vue'
import VueRouter from 'vue-router'

//使用插件
Vue.use(VueRouter)

//引入组件
import Home from '@/pages/Home'
import Search from '@/pages/Search'
import Login from '@/pages/Login'
import Register from '@/pages/Register'

//配置路由
export default new VueRouter({
    //配置路由
    routes: [{
            name: 'shouye',
            path: '/home',
            component: Home,
            meta: { show: true }
        },
        {
            name: 'xiangqing',
            // 如何指定params参数可传可不传？只需在路由path后的占位符后加'?'
            path: '/search/:keyword?',
            component: Search,
            meta: { show: true }
        },
        {
            name: 'denglu',
            path: '/login',
            component: Login,
            meta: { show: false }
        },
        {
            name: 'zhuce',
            path: '/register',
            component: Register,
            meta: { show: false }
        },
        //重定向，当页面加载后网址自动从/跳到/home，也就是上面的首页组件页面
        {
            path: '/',
            redirect: '/home'
        }
    ]
})

5.4在router文件夹里写完配置后，要在main.js里面引入和注册

import Vue from 'vue'
import App from './App.vue'
// 引入路由
import router from '@/router'

Vue.config.productionTip = false

new Vue({
    render: h => h(App),
    // 注册路由（这里如果单词相同可以简写为一个，即 router，）
    router: router,
}).$mount('#app')

6、两种组件的使用

<template>
  <div id="app">
    <!-- 路由组件三件套3:使用组件 -->
    <HeaderVue></HeaderVue>
    <br /><br />
    <!-- 非路由组件使用 -->
    <router-view></router-view>
    <br /><br />
    <FooterVue v-show="$route.meta.show"></FooterVue>
  </div>
</template>

<script>
// 路由组件三件套1：引入组件
import HeaderVue from "./components/Header/Header.vue";
import FooterVue from "./components/Footer/Footer.vue";

export default {
  name: "App",
  // 路由组件三件套2：注册组件
  components: {
    HeaderVue,
    FooterVue,
  },
};
</script>

<style> </style>

6.1、路由组件的跳转

在代码中路由的跳转就两种形式：

声明式导航（router-link：务必要有to属性）和 编程式导航 push||replace
编程式导航更好用：因为可以书写自己的业务逻辑

// 声明式路由导航 ， 在浏览器中router-link会转变为<a>标签， router-link == a
// 这里指当点击这个“a”标签时会跳转到 to 的那个组件，可以用params或query传参
<router-link to="/login">请登录</router-link>

// 编程式路由传参 goSearch
// 这里是添加点击事件，触发下面的this.$router.push，里面使用params或query传参
<template>
  <div>
     <button class="btn" @click="goSearch">搜一搜</button>
  </div>
</template>

<script>
export default {
  name: "Header",
  methods: {
    // 路由传递参数
    goSearch() {
      // 常用：对象传参
      this.$router.push(
        //如果只要跳转，就直接写this.$router.push("/跳转路径"）就好了，传参就下面的);
        
        {
          name: "xiangqing",
          params: { keyword: this.keyword },
          query: { id: this.keyword.toUpperCase() },
        },
        //如果不加下面的成功或失败的回调，重复点击搜索按钮时控制面板会飘红，虽然是没有影响的。。。(治标不治本方法)
        () => {},
        () => {}
      
</script>

路由组件和非路由组件区别（引用别人写的）：