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啦~*/