1. 程式人生 > >vue-cli專案的初始化及常見‘怪’問題

vue-cli專案的初始化及常見‘怪’問題

/*命令用綠色標註*/

/*加程式碼用 ++ 表示,減程式碼用 --表示,更改程式碼用 +-表示*/

1.專案初始化

1.$ vue init webpack [專案名稱--可省略,預設在當前資料夾下建立(檔名最好純小寫,當前檔案目錄最好也是)]

2.按回車並填入/選擇相關資訊。(vue-router 必備)

3.建立完成後,會自動生成多個配置檔案,如果看見這些檔案/資料夾,則說明初始化成功

2.將專案快速部署到GitHub(具體命令此處不詳講,可參考官方API)

~部署本地倉庫

1.進入GitBush,cd 進入專案根目錄,執行命令: $git init  ,很快,專案倉庫已經初始化完成。(路徑不要出現中文,最好純小寫)

2.$ git add -A

3.$ git commit -m"initialize"

4.本地倉庫初始化完成

~部署GitHub

1.新增公鑰,以前用過就不用添加了。(具體操作請百度)

2.新建遠端倉庫,並命名(與本地倉庫名一致即可,具體操作請百度)

3.遠端倉庫初始化完成

~將本地倉庫同步於遠端倉庫

1.關聯倉庫

$ git remote add origin [email protected]:你的使用者名稱/你的倉庫名.git(此行程式碼GitHub新倉庫頁面上有,且基本資訊都已填寫,直接複製即可)

2.推送並關聯分支

$ git push -u origin master

3.現在在GitHub上已經可以看到你的倉庫及一些基礎配置檔案/檔案夾了。

3.更改基本配置

~使用npm run dev 自動開啟瀏覽器

進入 config / index.js,將 dev 中的 autoOpenBrowser 屬性值改為 true,如下所示

  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one     will be determined
    +-autoOpenBrowser: true,
    errorOverlay: true,
    notifyOnErrors: true,
    ......

~網址去 ‘#’: 

進入 src / router / index.js  加入程式碼:mode: 'history',如下所示

export default new Router({
  ++mode: 'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

 ~更改打包預設設定: 

進入 config / index.js ,將 build 中的 assetsPublicPath 屬性,由 '/' 改為  './' ,如下所示

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    +-assetsPublicPath: './',

    ......

 ~如需移動端測試,則更改預設IP:

進入 config / index.js,將 dev 中的,host屬性改為 PC和移動端同區域網的 IP。查詢IP:cmd中輸入ipconfig ,查詢形如 192.168.××.××  的IPv4。如下所示

dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},

    // Various Dev Server settings
    +-host: '192.168.××.××', // can be overwritten by process.env.HOST
    ......

~新增404頁面(可自己設計): 

1.在 src / components 下建立目錄 common ,在common下建立 Error.vue,具體頁面可自行設計,此處貼一個示例

<template>
    <div>
        <router-link to="/">返回首頁</router-link>
        <p>頁面錯誤:404</p>
        <p>Sorry,您訪問的頁面不存在...</p>
    </div>
</template>

<style lang="scss" scoped>
    div{
        p{
            font-size: 5em;
            margin-top: 100px;
        }
    }
</style>

2.進入 src / router / index.js ,新增程式碼

import Error from '@/components/common/Error'

{path: '/*',name: 'Error',component: Error},如下所示

import Vue from 'vue'
import Router from 'vue-router'
++import Error from '@/components/common/Error'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    ++{
    ++  path: '/*',
    ++  name: 'Error',
    ++  component: Error
    ++}
  ]
})

4.常用模組安裝及配置

~安裝vuex

1.$ npm i vuex --save

2.在 src 目錄下建立 vuex 資料夾

3.在 vuex 資料夾下建立 store.js

4.進入store.js,填入以下程式碼

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

~安裝sass

1.$ npm i node-sass --save-dev

2.$ npm i sass-loader --save-dev

3.進入 build / webpack.base.conf.js,在 module 中的 rules 裡面加上{test: /\.scss$/,loaders: ['style','css','sass']},如下所示

  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      ++{
      ++  test: /\.scss$/,
      ++  loaders: ['style','css','sass']
      ++},
       ......

~安裝 rem的自適應 

1.$ npm i lib-flexible --save

2.進入 src / main.js 加入程式碼  import 'lib-flexible',如下所示

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
++import 'lib-flexible'
......

3.進入根目錄下的 index.html ,將  <meta name="viewport" content="width=device-width,initial-scale=1.0">這行程式碼註釋掉,如下所示

<html>
  <head>
    <meta charset="utf-8">
    +-<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
    <title>mobiletest</title>
  </head>

4.$ npm i px2rem-loader --save-dev

5.進入 build / utils.js ,在 exports.cssLoaders 中加入程式碼 const px2remLoader = {loader: 'px2rem-loader',options: {remUint:75}},如下所示

exports.cssLoaders = function (options) {
  options = options || {}

  const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

  const postcssLoader = {
    loader: 'postcss-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

  ++const px2remLoader = {
  ++  loader: 'px2rem-loader',
  ++  options: {
  ++    remUint: 75
  ++  }
  ++}
......

 6.繼續在本檔案下,將程式碼 const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] 註釋掉,新增程式碼

const loaders = [cssLoader,px2remLoader]

if (options.usePostCSS) {loaders.push(postcssLoader)},如下所示

  function generateLoaders (loader, loaderOptions) {
    +-// const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
    ++const loaders = [cssLoader,px2remLoader]

    ++if (options.usePostCSS) {
    ++  loaders.push(postcssLoader)
    ++}

    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }
    ......

~ 安裝 axios

1.$ npm i axios --save

2.進入 src / main.js,加入程式碼 import axios from 'axios',如下所示

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import 'lib-flexible'
++import axios from 'axios'
......

3.繼續在當前檔案下,加入程式碼

axios.defaults.withCredentials = true

Vue.prototype.$http = axios,如下所示

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import 'lib-flexible'
import axios from 'axios'

++axios.defaults.withCredentials = true//跨域設定,允許攜帶cookie
++Vue.prototype.$http = axios//以後直接使用 this.$http 代替 axios

Vue.config.productionTip = false
......

~安裝 vue-awesome-swiper 

1.$ npm i vue-awesome-swiper --save

2.在需要的元件中加入程式碼 

import 'swiper/dist/css/swiper.css'

import { swiper,swiperSlide } from 'vue-awesome-swiper'(按需引入)

components: {swiper,swiperSlide}(按需引入),如下所示

<script>
    ++import 'swiper/dist/css/swiper.css'
    ++import { swiper,swiperSlide } from 'vue-awesome-swiper'
    export default {
        data(){
            return{
                
            }
        },
        ++components: {
        ++    swiper,
        ++    swiperSlide
        ++}
    }
</script>

~安裝第三方UI,此處以安裝 ElementUI 為例 

1.$ npm i element-ui --save

2.進入 src / main.js ,加入程式碼

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI),如下所示

import App from './App'
import router from './router'
++import ElementUI from 'element-ui'
++import 'element-ui/lib/theme-chalk/index.css'

++Vue.use(ElementUI)

Vue.config.productionTip = false
......

 5.可能會遇到的奇怪問題

~在繫結屬性 :src 中引用字串變數(本地圖片路徑)時,圖片找不到,兩種解決方法。

1.用 require() 函式解析 路徑字串,再將其賦給 :src 。

2.將圖片等靜態資源放入 根目錄下的 static 資料夾下,就可以直接將 路徑字串賦給 :src 了。

~使用 v-for 命令時,控制檯有報錯或者警告。

像這樣寫,就可以避免(加入key值)

v-for="(item,index) in Array" :key="index"

~ 自己封裝好了一個元件,不知道怎麼給元件新增自定義屬性??

這樣做(為元件加 props 屬性),以下程式碼僅作為例子:

<template>
    <div>
        <swiper  class="swiper" :options="swiperOption">
            <swiper-slide class="swiper-slide" v-for="(item,index) in imgs" :key="index"><!--此處使用了自定義屬性 imgs,它將被繫結一個數組-->
                <img width="100%" height="100%" :src="item" :alt="item">
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
    import 'swiper/dist/css/swiper.css'
    import { swiper,swiperSlide } from 'vue-awesome-swiper'
    export default {
        ++props:['imgs'],/*此處為元件添加了一個自定義屬性 imgs */
        data(){
            return{
                swiperOption: {
                    // direction: 'vertical',
                    loop: true,
                    autoplay:{
                        disableOnInteraction: false,
                        delay: 1000
                    },
                    pagination: {
                        el: '.swiper-pagination',
                        clickable:true
                    }
                }
            }
        },
        components: {
            swiper,
            swiperSlide
        }
    }
</script>

~明明給後臺傳送了json,並且傳送也成功了,後臺卻接收不到。 

這樣做或許可以解決(是或許可以解決,不是一定)

let querystring = require('querystring');
let newJson = querystring.stringify(你要傳送的JSON或form表單);/*解析為字串*/
/*給後臺傳送資料時,將newJson傳送就OK啦~*/

未完待續......