vue前台项目（一）

一， 使用Vue脚手架

1.1. 使用脚手架创建模板项目

1)       vue-cli是vue官方提供的脚手架工具  command line interface 

2)       最新的版本是4,

3)       3.x版本与4.x版本变化不大, 但3.x相对于2.x的版本变化特别大

4)       在线文档: https://cli.vuejs.org/zh/

1.1.1. 创建vue项目

1)       创建脚手架4/3的vue项目, 并运行

npm install -g @vue/cli     //安装脚手架

vue create vue-demo      //创建脚手架名称

npm run serve       //开发环境自动启动项目

npm run build 打包文件

检查版本；vue --version

vue-cli3脚手架项目结构

gshop

    |-- node_modules

    |-- public

       |-- index.html: 主页面文件

    |-- src

       |-- main.js: 应用入口js

    |-- babel.config.js: babel的配置文件

    |-- vue.config.js: vue的配置文件，需要手动添加

    |-- .gitignore: git版本管制忽略的配置

    |-- package.json: 应用包配置文件

    |-- README.md: 应用描述说明的readme文件

此时，webpack配置文件已经隐藏，不让修改，如果我们需要修改配置文件，修改vue.config.js,相当于修改webpack配置文件，用的是common.js模块语法

1.1.1. 本地测试运行打包项目

    npm install -g serve

    serve dist -p 5000

    访问: http://localhost:5000

1.1. eslint

1.1.1. 说明

1)                ESLint是一个代码规范检查工具

2)       它定义了很多特定的规则, 一旦你的代码违背了某一规则, eslint会作出非常有用的提示

3)                官网: http://eslint.org/

4)                基本已替代以前的JSLint

 

1)       vue.config.js: 关闭规则检查，整体关闭

         // 关闭ESLint的规则

         lintOnSave: false,

module.exports = {
  lintOnSave: false
}

jsconfig.json配置别名@提示

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
        "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

注；@代表从src目录下找

1. Header和Footer是固定的所以是非路由组件，拆分该组件，拆分less样式，但是vue脚手架没有安装less, 

安装less,   npm i   less  less-loader -D, 不需要配置，安装完后，vue脚手架会自动配置

2.html中引入reset.css,清除默认样式，

3.新建pages路由文件夹-,home(index.vue), login(index.vue), register(index.vue), search(index.vue),

4.新建router路由文件夹, index.js(路由配置文件)， routes.js(路由配置对象)，安装路由插件

安装 npm i vue-router -S

routers.js路由配置对象配置好了，在index.js中引入即可

// 引入路由组件

import Home  from '@/pages/Home'
import  Login  from  '@/pages/Login'
import  Register  from  '@/pages/Register'
import  Search  from  '@/pages/Search'



// 暴露路由数组
export  default  [
  {
    path:'/home',
    component:Home
  },

  {
    path:'/login',
    component:Login
  },
  {
    path:'/register',
    component:Register
  },
  {
    path:'/search',
    component:Search
  },

  //重定向
  {
    path:'/',
    redirect:'/home'
  }

]

import Vue from 'vue'

import VueRouter  from  'vue-router'
// 配置路由插件
Vue.use(VueRouter)

//引入路由对象
import routes  from '@/router/routes'

 export default   new VueRouter({
  routes
})

5，在login,register, home,设置申明式路由，  在search中设置编程式路由,路由传参

 <router-link to="/login" >登录</router-link>

  <div class="searchArea">
        <form action="###" class="searchForm">
          <input type="text" id="autocomplete" class="input-error input-xxlarge" v-model="keyword"/>
          <button class="sui-btn btn-xlarge btn-danger" type="button" @click="toSearch">搜索</button>
        </form>
      </div>

  methods:{
    toSearch(){
      //
      // this.$router.push(`/search/${this.keyword}?keyword=${this.keyword.toUpperCase()}`)

      //如果使用对象：
      //传递params参数必须和name配合
      //path和params无法配合使用
      //path和query是可以使用的
      //name和query也是可以的
      //以后尽量写name
      this.$router.push({
        // path:'/search',
        name:'search',
        query:{
          keyword1:this.keyword.toUpperCase()
        },
        params:{
          //如果传递params参数是一个空串，那么路径会有问题，传过去如果是undefined就没事
          keyword:this.keyword || undefined
        }
      })

    }

注；1. 如果params参数是空窜，那么search路由组件的内容不会显示，此时需要在该路由对象中的params中配置一个？

{
    path:'/search/:keyword?',
    component:Search,
    name:'search',
    props: route => ({keyword:route.params.keyword,keyword1:route.query.keyword1})
  },

2.如果this.$router.push(）是对象形式，如果用对象形式传参，params传的空窜，导航路径不正确，此时需要在params参数设置下

params:{
          //如果传递params参数是一个空串，那么路径会有问题，传过去如果是undefined就没事
          keyword:this.keyword || undefined
        }

3. 利用props简化路由传参， 在路由对象中配置props函数

 {
    path:'/search/:keyword?',
    component:Search,
    name:'search',
    props: route => ({keyword:route.params.keyword,keyword1:route.query.keyword1})
  },

4.在路由组件中用props接收参数

  props:['keyword','keyword1']