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']