Vue项目尚品汇-1

1.初始化脚手架，新建项目

安装脚手架：

npm install -g @vue/cli

新建项目：

vue create xxx（项目名）

脚手架目录介绍：

node_modules:放置项目依赖的地方

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

src：程序员源代码文件夹src：程序员源代码文件夹

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

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

App.vue 唯一的根组件
main.js 入口文件【程序最先执行的文件】
babel.config.js:babel配置文件
package.json：看到项目描述、项目依赖、项目运行指令
README.md:项目说明文件

脚手架中的简单配置：

1.在package.json文件中，浏览器自动打开
        "scripts": {
         "serve": "vue-cli-service serve --open",
          "build": "vue-cli-service build",
          "lint": "vue-cli-service lint"
        },

2.关闭eslint校验工具
比如创建变量但是没有使用,eslint会报错,程序无法运行,这不行!
创建vue.config.js文件：需要对外暴露
module.exports = {
   lintOnSave:false,
}

2.项目中路由的分析

两个非路由组件：Header 、Footer（在首页和登录页，在登录|注册页没有）
路由组件:Home、Search、Login（登录路由，没有底部的Footer组件，带有二维码的）、Register（没有底部的Footer组件，带二维码的）

在此项目中，不再以HTML+CSS为主，主要搞业务，逻辑
在开发项目时：
    1.书写静态页面（HMTL+CSS）
    2.拆分组件
    3.获取服务器的数据动态展示
    4.完成相应的动态业务逻辑

3.创建非路由组件（2个：Header、Footer）

非路由组件使用分为几步:
第一步：定义
第二步：引入
第三步：注册
第四步:使用

静态页面中找出：
结构 + 样式 +图片资源

在style标签的身上加上lang="less"
安装less less-loader@5
切记less-loader安装5版本的，不要安装在最新版本，安装最新版本less-loader会报错，报的错误setOption函数未定义

src文件结构

 在components文件夹中，images是组件需要引入的资源，index.vue在引入组件时可以简写到Footer文件夹

浏览器显示

奥术大付

清除浏览器的默认样式,引入reset.css文件到public文件夹中的index.html文件中 

<!--引入清除默认样式-->   
<link rel="stylesheet" href="<%= BASE_URL %>reset.css">

4.路由组件的搭建

1.创建路由组件

安装路由：npm i vue-router@3 --save         --save:可以让你安装的依赖，在package.json文件当中进行记录
创建路由组件【一般放在pages文件夹】：四个路由组件：Home、Search、Login、Register

2.配置路由

 

router/index.js文件中:

//配置路由的地方
import Vue from "vue";
import VueRouter from "vue-router";

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

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

//配置路由
export default new VueRouter({
  routes:[
    {
      path:'/home',
      component:Home
    },
    {
      path:'/search',
      component:Search
    },
    {
      path:'/login',
      component:Login
    },
    {
      path:'/register',
      component:Register
    },
    //重定向,当项目跑起来的时候,访问 / 时,立马让它定向到主页
    {
      path:'*',
      redirect:'/home'
    }
  ]
})

 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,
}).$mount('#app')

3.路由的跳转

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

根据页面点击跳转的地方添加路由跳转