摘要:近段时间常使用开发,写点记录,避免时间久之忘了。安装教程查看是否已安装,在中输入若已安装则输出版本号。继承报错可能是文件路径问题。当和继承的不同时在文件夹内外的话,会出现该错误。
近段时间常使用vue-cli开发,写点记录,避免时间久之忘了。
环境1. nodejs
vue-cli开发基于nodejs环境,确保开发的环境中已安装了nodejs。
安装教程 https://www.runoob.com/nodejs...
查看是否已安装nodejs,在cmd中输入 node --version 若已安装则输出版本号。
2. vue
安装vue环境 npm install vue
安装vue-cli环境,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. 安装模块
使用模块配合开发,如 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) //定义状态和暴露状态,如 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: "发布vue组件到npm" })
1. 新建项目
使用cli快速搭建一个项目,和新建一个普通的项目一样。假定项目为项目名 projectname
2. 开发组件
新建一个即将发布的组件vue文件,比如在components目录下新建componentname.vue
3. 修改配置文件
//修改package.json文件,如 { "name": "projectname", //发布的包名,避免和已发布的包名冲突 "version": "1.0.0", //版本号,当第二次发布时需手动设置其版本 "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. 打包项目
进入项目终端,执行 npm run build
打包后将.gitignore文件的dist/删掉
5. 发布模块
终端中登录npm,npm login
输入账号密码后,执行发布 npm publish
6. 使用模块
//新项目中安装npm包,npm install --save-dev projectname import componetName from "projectname" components:{ componetName }碰到的问题
1. 启动服务失败,非程序语法问题,导致启动服务打包错误?
可能是node_modules版本与本机安装的webpack版本不一致,删除,执行npm install重新下载所有依赖,偶尔神奇的墙会导致安装出错,多试几次。
2. 开发过程中设置局域网可访问?
在config文件夹下的index.js中修改host字段值为本机在局域网中的ip。
3. 开发过程中跨域访问?
//在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. 发出的请求编码失败?
存在特殊字符导致编码失败,如%,对参数进行encodeURI编码,替换浏览器的自动编码。
7. class 继承报错 Class constructor xxx cannot be invoked without "new" ?
可能是文件路径问题。当class和继承的class不同时在src文件夹内外的话,会出现该错误。
8. 使用elementUI时发现el-input类型为number时,绑定的值为0不显示?
elementUI版本2.3.4的bug,更新npm包即可。
9. 如何更新安装的npm包?
npm install -g npm-check-updates //安装高效升级插件 ncu //列出所有可更新的模块 ncu -a //更新所有模块
10. npm包发布失败,403无权限发布?
多半原因是包名冲突,在发布之前先查找是否已存在该模块
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){ //执行取消操作并从删除该条记录 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:{}) })
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/108358.html
摘要:如果我们能把不同路由对应的组件分割成不同的代码块,只在路由被访问的时候才加载对应的组件,这样就更加高效了。这样会大大提高首屏显示的速度,但是可能其他的页面的速度就会降下来。 一、 代码分割,让页面按需加载,加快首屏速率 vue.js构建单页应用虽然能通过路由来实现多页面效果,但是实际上打包后所有的代码都只有一个入口文件app.bundle.js,当项目变得十分庞大的时候,app.bun...
摘要:开始时间日接触,先在官网十目一行学完了基本特性,作为一个的伪全栈,用感受了一把双向绑定,感觉比的要强悍不少,但这开发环境吧,不能写个,就总觉得自己不能零距离接触。 开始时间:3.26日接触Vue,先在官网十目一行学完了基本特性:http://cn.vuejs.org/v2/guide/,作为一个JAVA WEB的伪全栈,用Myclipse感受了一把双向绑定,感觉比JQUERY的JSRE...
摘要:升级入坑小记场景描述引入的版本为,开启调试工具默认升级后可以调试。遂升级,发现大量使用失效,报,的中文文档,没有及时更新。机票订单和用户信息。 Vuex 升级入坑小记 场景描述 引入Vuex的版本为0.3,开启调试工具默认升级后可以调试Vuex。给作者一个大大的赞。为提高开发体验也是操碎了心 (๑•̀ㅂ•́)و✧ (8。安利下(Vue Devtools)。 Vue Devtools ...
摘要:前言今年一年都在学习实践全家桶,用全家桶结合独立开发了一个网站,体验还不错。会在此一点点记录所学所用所遇到的坑。磨刀不误砍柴工,先学习搭建项目,把项目跑起来先。结合的经验,对学习的组件还是有点期待的。 前言 今年一年都在学习实践 react 全家桶,用react全家桶结合antd独立开发了一个网站, 体验还不错。虽然有笔记,但是并没有写文章记录所学、所用、所遇到的坑等等一些知识。 技术...
阅读 3581·2023-04-26 02:55
阅读 2848·2021-11-02 14:38
阅读 4134·2021-10-21 09:39
阅读 2841·2021-09-27 13:36
阅读 3942·2021-09-22 15:08
阅读 2642·2021-09-08 10:42
阅读 2802·2019-08-29 12:21
阅读 666·2019-08-29 11:22