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