摘要:近段時間常使用開發(fā),寫點記錄,避免時間久之忘了。安裝教程查看是否已安裝,在中輸入若已安裝則輸出版本號。繼承報錯可能是文件路徑問題。當和繼承的不同時在文件夾內外的話,會出現該錯誤。
近段時間常使用vue-cli開發(fā),寫點記錄,避免時間久之忘了。
環(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的項目 vue init webpack projectname
之后會出現Project name和Project description之類的,無關緊要,可以修改,也可以默認跳過。
是否安裝路由 ?Install vue-router?(Y/n) Y //看情況定,一般都有用到
初始化項目完畢,根據提示操作,模塊安裝完后即可啟動項目 npm run dev
2. 修改配置
安裝的模板有些配置一般情況不符合自己需要,需要手動做些修改。
build文件夾utils.js文件中設置 publicPath: "../../" 解決圖片路徑找不到的問題
config文件夾的index.js文件build對象下的 assetsPublicPath: "./" 解決打包后的項目頁面空白問題
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. 新建項目
使用cli快速搭建一個項目,和新建一個普通的項目一樣。假定項目為項目名 projectname
2. 開發(fā)組件
新建一個即將發(fā)布的組件vue文件,比如在components目錄下新建componentname.vue
3. 修改配置文件
//修改package.json文件,如 { "name": "projectname", //發(fā)布的包名,避免和已發(fā)布的包名沖突 "version": "1.0.0", //版本號,當第二次發(fā)布時需手動設置其版本 "description": "A Vue.js project", //項目的描述,可不寫 "author": "starrysky", //項目的作者 "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: [ //該部分刪減內容 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. 打包項目
進入項目終端,執(zhí)行 npm run build
打包后將.gitignore文件的dist/刪掉
5. 發(fā)布模塊
終端中登錄npm,npm login
輸入賬號密碼后,執(zhí)行發(fā)布 npm publish
6. 使用模塊
//新項目中安裝npm包,npm install --save-dev projectname import componetName from "projectname" components:{ componetName }碰到的問題
1. 啟動服務失敗,非程序語法問題,導致啟動服務打包錯誤?
可能是node_modules版本與本機安裝的webpack版本不一致,刪除,執(zhí)行npm install重新下載所有依賴,偶爾神奇的墻會導致安裝出錯,多試幾次。
2. 開發(fā)過程中設置局域網可訪問?
在config文件夾下的index.js中修改host字段值為本機在局域網中的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. 項目打包后,頁面顯示空白?
在config文件夾下的index.js中的build對象下設置 assetsPublicPath: "./"
5. 項目打包后,圖片路徑加載錯誤?
在build文件夾下的utils.js設置 publicPath: "../../"
6. 發(fā)出的請求編碼失敗?
存在特殊字符導致編碼失敗,如%,對參數進行encodeURI編碼,替換瀏覽器的自動編碼。
7. class 繼承報錯 Class constructor xxx cannot be invoked without "new" ?
可能是文件路徑問題。當class和繼承的class不同時在src文件夾內外的話,會出現該錯誤。
8. 使用elementUI時發(fā)現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無權限發(fā)布?
多半原因是包名沖突,在發(fā)布之前先查找是否已存在該模塊
11. axios請求,如何取消重復請求?
//axios請求攔截器中統一處理 let pending = []; //聲明一個數組用于存儲每個請求的取消函數和標識 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 => { //統一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響應攔截器 axios.interceptors.response.use(data => { removePending(data.config); return data; }, error => { return Promise.reject(data:{}) })
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規(guī)行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/108358.html
摘要:如果我們能把不同路由對應的組件分割成不同的代碼塊,只在路由被訪問的時候才加載對應的組件,這樣就更加高效了。這樣會大大提高首屏顯示的速度,但是可能其他的頁面的速度就會降下來。 一、 代碼分割,讓頁面按需加載,加快首屏速率 vue.js構建單頁應用雖然能通過路由來實現多頁面效果,但是實際上打包后所有的代碼都只有一個入口文件app.bundle.js,當項目變得十分龐大的時候,app.bun...
摘要:開始時間日接觸,先在官網十目一行學完了基本特性,作為一個的偽全棧,用感受了一把雙向綁定,感覺比的要強悍不少,但這開發(fā)環(huán)境吧,不能寫個,就總覺得自己不能零距離接觸。 開始時間:3.26日接觸Vue,先在官網十目一行學完了基本特性:http://cn.vuejs.org/v2/guide/,作為一個JAVA WEB的偽全棧,用Myclipse感受了一把雙向綁定,感覺比JQUERY的JSRE...
摘要:升級入坑小記場景描述引入的版本為,開啟調試工具默認升級后可以調試。遂升級,發(fā)現大量使用失效,報,的中文文檔,沒有及時更新。機票訂單和用戶信息。 Vuex 升級入坑小記 場景描述 引入Vuex的版本為0.3,開啟調試工具默認升級后可以調試Vuex。給作者一個大大的贊。為提高開發(fā)體驗也是操碎了心 (??????)?? (8。安利下(Vue Devtools)。 Vue Devtools ...
摘要:前言今年一年都在學習實踐全家桶,用全家桶結合獨立開發(fā)了一個網站,體驗還不錯。會在此一點點記錄所學所用所遇到的坑。磨刀不誤砍柴工,先學習搭建項目,把項目跑起來先。結合的經驗,對學習的組件還是有點期待的。 前言 今年一年都在學習實踐 react 全家桶,用react全家桶結合antd獨立開發(fā)了一個網站, 體驗還不錯。雖然有筆記,但是并沒有寫文章記錄所學、所用、所遇到的坑等等一些知識。 技術...
閱讀 3602·2023-04-26 02:55
閱讀 2871·2021-11-02 14:38
閱讀 4147·2021-10-21 09:39
閱讀 2859·2021-09-27 13:36
閱讀 3970·2021-09-22 15:08
閱讀 2659·2021-09-08 10:42
閱讀 2812·2019-08-29 12:21
閱讀 681·2019-08-29 11:22