摘要:近段時間常使用開發(fā),寫點(diǎn)記錄,避免時間久之忘了。安裝教程查看是否已安裝,在中輸入若已安裝則輸出版本號。繼承報錯可能是文件路徑問題。當(dāng)和繼承的不同時在文件夾內(nèi)外的話,會出現(xiàn)該錯誤。
近段時間常使用vue-cli開發(fā),寫點(diǎn)記錄,避免時間久之忘了。
環(huán)境1. nodejs
vue-cli開發(fā)基于nodejs環(huán)境,確保開發(fā)的環(huán)境中已安裝了nodejs。
安裝教程 https://www.runoob.com/nodejs...
查看是否已安裝nodejs,在cmd中輸入 node --version 若已安裝則輸出版本號。
2. vue
安裝vue環(huán)境 npm install vue
安裝vue-cli環(huán)境,npm install --global vue-cli
1. 新建模板
新建一個projectname的項(xiàng)目 vue init webpack projectname
之后會出現(xiàn)Project name和Project description之類的,無關(guān)緊要,可以修改,也可以默認(rèn)跳過。
是否安裝路由 ?Install vue-router?(Y/n) Y //看情況定,一般都有用到
初始化項(xiàng)目完畢,根據(jù)提示操作,模塊安裝完后即可啟動項(xiàng)目 npm run dev
2. 修改配置
安裝的模板有些配置一般情況不符合自己需要,需要手動做些修改。
build文件夾utils.js文件中設(shè)置 publicPath: "../../" 解決圖片路徑找不到的問題
config文件夾的index.js文件build對象下的 assetsPublicPath: "./" 解決打包后的項(xiàng)目頁面空白問題
3. 安裝模塊
使用模塊配合開發(fā),如 Vue + Vuex + elementUI + axios + font-awesome + scss
Scss
安裝 Scss,使用方式
npm install node-sass --save-dev
npm install sass-loader --save-dev
安裝 font-awesome,使用方式
npm install font-awesome --save main.js中引入 import "font-awesome/css/font-awesome.css"
elementUI
安裝 elementUI,使用方式
npm i element-ui -S
在main.js中引入
import Element from "element-ui"
import "element-ui/lib/theme-chalk/index.css"
Vue.use(Element, {size: "small"})
axios
安裝axios,使用方式 this.$http(method:"post", url:"/webApi", data:{}).then(res=>{……});
npm install axios -S
在main.js中引入
import axios from "axios"
Vue.prototype.$http = axios
Vuex
安裝Vuex,使用方式 this.$store.commit("setMsg","message");
npm install vuex -S
在src中新建文件夾vuex,在vuex文件夾中新建store.js,如
//store.js import Vuex from "vuex" import Vue from "vue" Vue.use(Vuex) //定義狀態(tài)和暴露狀態(tài),如 const store = new Vuex.Store({ state: { msg: "message", }, mutations: { setMsg(state, val) { state.msg = val }, } }) export default store //main.js中引入 import store from "./vuex/store.js" new Vue({ el: "#app", router, store, components: { App }, template: "發(fā)布vue組件到npm" })
1. 新建項(xiàng)目
使用cli快速搭建一個項(xiàng)目,和新建一個普通的項(xiàng)目一樣。假定項(xiàng)目為項(xiàng)目名 projectname
2. 開發(fā)組件
新建一個即將發(fā)布的組件vue文件,比如在components目錄下新建componentname.vue
3. 修改配置文件
//修改package.json文件,如 { "name": "projectname", //發(fā)布的包名,避免和已發(fā)布的包名沖突 "version": "1.0.0", //版本號,當(dāng)?shù)诙伟l(fā)布時需手動設(shè)置其版本 "description": "A Vue.js project", //項(xiàng)目的描述,可不寫 "author": "starrysky", //項(xiàng)目的作者 "private": false, //開源,非私有 "main": "dist/componentname.min.js", //打包的入口文件 "repository": { //倉庫地址,可不寫 "type": "git", "url": "" }, } //修改build文件夾中的webpack-prod.conf.js,如 output: { //該部分為重寫 path: config.build.assetsRoot, publicPath: config.build.assetsPublicPath, filename: "componentname.min.js", library: "componentname", libraryTarget: "umd" }, plugins: [ //該部分刪減內(nèi)容 new webpack.DefinePlugin({ "process.env": env }), new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false } }, sourceMap: config.build.productionSourceMap, parallel: true }), new ExtractTextPlugin({ filename: utils.assetsPath("css/[name].[contenthash].css"), allChunks: true, }), new OptimizeCSSPlugin(), ] //修改config文件夾下index.js的build字段中的 assetsSubDirectory: "/" //修改main.js文件 import componentname from "@/components/componentname.vue", export default componentname
4. 打包項(xiàng)目
進(jìn)入項(xiàng)目終端,執(zhí)行 npm run build
打包后將.gitignore文件的dist/刪掉
5. 發(fā)布模塊
終端中登錄npm,npm login
輸入賬號密碼后,執(zhí)行發(fā)布 npm publish
6. 使用模塊
//新項(xiàng)目中安裝npm包,npm install --save-dev projectname import componetName from "projectname" components:{ componetName }碰到的問題
1. 啟動服務(wù)失敗,非程序語法問題,導(dǎo)致啟動服務(wù)打包錯誤?
可能是node_modules版本與本機(jī)安裝的webpack版本不一致,刪除,執(zhí)行npm install重新下載所有依賴,偶爾神奇的墻會導(dǎo)致安裝出錯,多試幾次。
2. 開發(fā)過程中設(shè)置局域網(wǎng)可訪問?
在config文件夾下的index.js中修改host字段值為本機(jī)在局域網(wǎng)中的ip。
3. 開發(fā)過程中跨域訪問?
//在config文件夾下的index.js中修改proxyTable,如跨域訪問 http:192.168.0.3:10010/api…… proxyTable: { "/api":{ target: "http:192.168.0.3:10010", chageOrigin: true, pathRewrite:{ "^/api": "/api" } } }
4. 項(xiàng)目打包后,頁面顯示空白?
在config文件夾下的index.js中的build對象下設(shè)置 assetsPublicPath: "./"
5. 項(xiàng)目打包后,圖片路徑加載錯誤?
在build文件夾下的utils.js設(shè)置 publicPath: "../../"
6. 發(fā)出的請求編碼失敗?
存在特殊字符導(dǎo)致編碼失敗,如%,對參數(shù)進(jìn)行encodeURI編碼,替換瀏覽器的自動編碼。
7. class 繼承報錯 Class constructor xxx cannot be invoked without "new" ?
可能是文件路徑問題。當(dāng)class和繼承的class不同時在src文件夾內(nèi)外的話,會出現(xiàn)該錯誤。
8. 使用elementUI時發(fā)現(xiàn)el-input類型為number時,綁定的值為0不顯示?
elementUI版本2.3.4的bug,更新npm包即可。
9. 如何更新安裝的npm包?
npm install -g npm-check-updates //安裝高效升級插件 ncu //列出所有可更新的模塊 ncu -a //更新所有模塊
10. npm包發(fā)布失敗,403無權(quán)限發(fā)布?
多半原因是包名沖突,在發(fā)布之前先查找是否已存在該模塊
11. axios請求,如何取消重復(fù)請求?
//axios請求攔截器中統(tǒng)一處理 let pending = []; //聲明一個數(shù)組用于存儲每個請求的取消函數(shù)和標(biāo)識 let cancelToken = axios.CancelToken; let removePending = (config) => { let i = pending.findIndex(item => item.u === config.url+"&"+config.data); if(i > -1){ //執(zhí)行取消操作并從刪除該條記錄 pending[i].f(); pending.splice(i, 1); } } // http請求攔截器 axios.interceptors.request.use(config => { //統(tǒng)一get請求和post請求,并將其格式化 removePending(config); config.cancelToken = new cancelToken((c)=>{ pending.push({ u: config.url + "&" + config.data, f: c }); }); return config }, error => { return Promise.reject(error) }) // http響應(yīng)攔截器 axios.interceptors.response.use(data => { removePending(data.config); return data; }, error => { return Promise.reject(data:{}) })
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/108358.html
摘要:如果我們能把不同路由對應(yīng)的組件分割成不同的代碼塊,只在路由被訪問的時候才加載對應(yīng)的組件,這樣就更加高效了。這樣會大大提高首屏顯示的速度,但是可能其他的頁面的速度就會降下來。 一、 代碼分割,讓頁面按需加載,加快首屏速率 vue.js構(gòu)建單頁應(yīng)用雖然能通過路由來實(shí)現(xiàn)多頁面效果,但是實(shí)際上打包后所有的代碼都只有一個入口文件app.bundle.js,當(dāng)項(xiàng)目變得十分龐大的時候,app.bun...
摘要:開始時間日接觸,先在官網(wǎng)十目一行學(xué)完了基本特性,作為一個的偽全棧,用感受了一把雙向綁定,感覺比的要強(qiáng)悍不少,但這開發(fā)環(huán)境吧,不能寫個,就總覺得自己不能零距離接觸。 開始時間:3.26日接觸Vue,先在官網(wǎng)十目一行學(xué)完了基本特性:http://cn.vuejs.org/v2/guide/,作為一個JAVA WEB的偽全棧,用Myclipse感受了一把雙向綁定,感覺比JQUERY的JSRE...
摘要:升級入坑小記場景描述引入的版本為,開啟調(diào)試工具默認(rèn)升級后可以調(diào)試。遂升級,發(fā)現(xiàn)大量使用失效,報,的中文文檔,沒有及時更新。機(jī)票訂單和用戶信息。 Vuex 升級入坑小記 場景描述 引入Vuex的版本為0.3,開啟調(diào)試工具默認(rèn)升級后可以調(diào)試Vuex。給作者一個大大的贊。為提高開發(fā)體驗(yàn)也是操碎了心 (??????)?? (8。安利下(Vue Devtools)。 Vue Devtools ...
摘要:前言今年一年都在學(xué)習(xí)實(shí)踐全家桶,用全家桶結(jié)合獨(dú)立開發(fā)了一個網(wǎng)站,體驗(yàn)還不錯。會在此一點(diǎn)點(diǎn)記錄所學(xué)所用所遇到的坑。磨刀不誤砍柴工,先學(xué)習(xí)搭建項(xiàng)目,把項(xiàng)目跑起來先。結(jié)合的經(jīng)驗(yàn),對學(xué)習(xí)的組件還是有點(diǎn)期待的。 前言 今年一年都在學(xué)習(xí)實(shí)踐 react 全家桶,用react全家桶結(jié)合antd獨(dú)立開發(fā)了一個網(wǎng)站, 體驗(yàn)還不錯。雖然有筆記,但是并沒有寫文章記錄所學(xué)、所用、所遇到的坑等等一些知識。 技術(shù)...
摘要:同源策略同源策略是一種約定,由公司年引入瀏覽器,它是瀏覽器最核心也最基本的安全功能,如果缺少了同源策略,瀏覽器很容易受到等攻擊。 一、Vue變化檢測 背景 初始化對象,屬性未知;某些事件觸發(fā)時,對象改變(新增屬性),Vue監(jiān)聽不到 原因 Vue.js 不能檢測到對象屬性的添加或刪除,因?yàn)閂ue.js 在初始化實(shí)例時將屬性轉(zhuǎn)為 getter/setter,所以屬性必須在 dat...
閱讀 3593·2023-04-26 02:55
閱讀 2863·2021-11-02 14:38
閱讀 4139·2021-10-21 09:39
閱讀 2849·2021-09-27 13:36
閱讀 3951·2021-09-22 15:08
閱讀 2649·2021-09-08 10:42
閱讀 2807·2019-08-29 12:21
閱讀 673·2019-08-29 11:22