Category Archives: Vue
Vue2.X集成typeScript
1.安装依赖
2.配置 webpack.base.conf.js
3.添加 tsconfig.json
4.让 ts 识别 .vue
5..js 文件重命名为.ts 文件
6.改造 .vue 文件
7.运行 npm run dev
8.让vue识别全局方法/变量
vue环境安装&开发工具
Node.js 服务端的 JavaScript，所有的包依赖、开发脚手架都是基于node.js的。 下载地址：https://nodejs.org/en/ Python 有些依赖包是python写的。 下载地址：https://www.python.org/downloads/release/python-2717/ Vscode 微软开源轻量级IDE，插件多，受众广泛。 下载地址：https://visualstudio.microsoft.com/zh-hans/downloads/ 安装过node.js之后，就可以cmd下查看npm的版本了，vue2要求npm的版本3.0以上。 用以下命令查看npm版本：npm -v 使用淘宝 NPM 镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org #升级 npm cnpm install npm -g # 升级或安装 cnpm npm install cnpm -g 安装Vue命令行工具 # 全局安装 vue-cli $ npm install --global vue-cli
View Detailsvue项目中在单独的js文件中使用element ui
vue项目中在单独的js文件中使用element ui 例如要使用MessageBox组件 例如要使用MessageBox组件 1.引入组件 import { MessageBox } from "element-ui"; 2.使用 MessageBox.confirm("这是一个内容", "这是一个标题" ,{undefined distinguishCancelAndClose: true, confirmButtonText: ‘确认’, showClose:false, showCancelButton:false }).then(()=>{undefined // 点击确认按钮的回调 }） 一般是在响应拦截器中使用，亲测有效 ———————————————— 版权声明：本文为CSDN博主「流年＊痕迹」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/qq_52007839/article/details/111663753
View Details最全的 Vue 面试题+详解答案
前言 本文整理了高频出现的 Vue 相关面试题并且附带详解答案 难度分为简单 中等 困难 三种类型 大家可以先不看答案自测一下自己的 Vue 水平哈 如果对原理感兴趣的同学 欢迎查看小编的手写 Vue 源码系列文章 如果对答案有不一样见解的同学欢迎评论区补充讨论 最后欢迎大家点击 链接 加入到鲨鱼哥的前端群 内推 讨论技术 摸鱼 求助 皆可(进群免费领取 Vue2 源码思维导图哈) 整理不易 如果觉得本文有帮助 记得点赞三连哦 十分感谢！ 简单 1 MVC 和 MVVM 区别 MVC MVC 全名是 Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范 Model（模型）：是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据 View（视图）：是应用程序中处理数据显示的部分。通常视图是依据模型数据创建的 Controller（控制器）：是应用程序中处理用户交互的部分。通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据 MVC 的思想：一句话描述就是 Controller 负责将 Model 的数据用 View 显示出来，换句话说就是在 Controller 里面把 Model 的数据赋值给 View。 MVVM MVVM 新增了 VM 类 ViewModel 层：做了两件事达到了数据的双向绑定 一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。 MVVM 与 MVC 最大的区别就是：它实现了 View 和 Model 的自动同步，也就是当 Model 的属性改变时，我们不用再自己手动操作 Dom 元素，来改变 View 的显示，而是改变属性后该属性对应 View 层显示会自动改变（对应Vue数据驱动的思想） 整体看来，MVVM 比 MVC 精简很多，不仅简化了业务与界面的依赖，还解决了数据频繁更新的问题，不用再用选择器操作 DOM […]
View Details最全的TypeScript学习指南
前言 Hello 大家好 我是鲨鱼哥 这次给大家带来的是我曾经非常嫌弃 如今却爱不释手的 TS 技术 哈哈 大家看往期文章可能已经发现鲨鱼哥之前主要是 Vue 技术栈的 然后因为 Vue2 和 TS 的结合总感觉不是很丝滑 所以我果断就在技术选型的时候去掉了 TS（其实我是觉得用起来很烦 和我之前最讨厌的 eslint 一样 各种报错让人不爽）但是 鲨鱼哥今年换了新公司 开启了全新的 react hook+ts 这一套组合拳 然后在重新认真学习并在项目里用上了 ts 之后 确实真香 哈哈 最直观的感受就是可以帮我们规避很多类型错误 更友好的提示 甚至有些方法我们根据定义的类型大概就知道作用是什么了（去掉了写注释的麻烦）况且如今大火的 Vue3 也是 TS 重构的 然后 react 和 ts 的结合就更不必说了 所以还没有开始 ts 的同学就从现在开始跟着鲨鱼哥一起来学习吧 最后欢迎大家点击 链接 加入到鲨鱼哥的前端群 内推 讨论技术 摸鱼 求助 皆可 整理不易 如果觉得本文有帮助 记得点赞三连哦 十分感谢！ 1 ts 安装和编译 第一步 新建一个空文件夹用来学习 ts 第二步 全局安装 ts 和 ts-node
|
1 2 |
cnpm i typescript -g //全局安装ts cnpm i -g ts-node //全局安装ts-node |
第三步 生成 tsconfig.js 配置文件
|
1 |
tsc --init |
我们就先按照自动生成的 tsconfig 配置项去使用 里面的配置咱们可以先不去管他 后续熟练了再去配置 第四步 在项目下新建一个index.ts 直接写入
|
1 2 |
const a: string = "hello"; console.log(a); |
[…]
View DetailsTypeScript+Vue实例完全教程
功能 轮播 搜索 列表 懒加载 简单动画 loading vue-router.ts vuex.ts vue-class-component使用 vuex-class使用 xxx.d.ts声明文件 基于类的编写方式 mock数据 tsconfig.json webpack配置 vue-typescript-cli 项目地址：https://github.com/SimonZhangITer/vue-typescript-dpapp-demo 完成后的简单例子 基于类的写法加上静态类型检查，简直不能再嗨
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script lang="ts"> import Vue from "vue"; import Component from "vue-class-component"; import { State } from "vuex-class"; @Component export default class Shops extends Vue { @State shops: StoreState.shop[]; @State searchVal: string; get shopList(): StoreState.shop[] { const shops = this.shops; const searchVal = this.searchVal; return shops.filter( (el: StoreState.shop) => el.shopName.indexOf(searchVal) > -1 ); } } </script> |
为什么使用TypeScript JavaScript的超集 支持所有原生JavaScript的语法 强类型语言 现在很多主流语言都是强类型的，而这点也一直是JavaScript所被人诟病的地方。使用TypeScript之后，将会在代码调试、重构等步骤节省很多时间。 比如说：函数在返回值的时候可能经过复杂的操作，那我们如果想要知道这个值的结构就需要去仔细阅读这段代码。那如果有了TypeScript之后，直接就可以看到函数的返回值结构，将会非常的方便 强大的IDE支持 现在的主流编辑器如VSCode、WebStorm、Atom、Sublime等都对TypeScript有着非常友好的支持，主要体现在智能提示上，非常的方便 可运行于任何浏览器、计算机、操作系统 强大的编译引擎 迭代更新快 不断更新，提供更加方便友好的Api 微软和Google爸爸 TypeScript是微软开发的语言，而Google的Angular使用的就是TypeScript，所以不用担心会停止维护，至少在近几年内TypeScript都会一门主流开发语言 npm下载量非常高 截止2017.12.17, TypeScript在全球范围内的npm日均下载量在30w左右，这个数字将近是vue下载量的10倍，可见TypeScript还是非常受欢迎的 TypeScript配置 本项目已经配置完毕，这里记录一下当时的踩坑过程 1. Webpack 首先需要安装ts-loader，这是TypeScript为Webpack提供的编译器，类似于babel-loader
|
1 |
npm i ts-loader -D |
接着在Webpack的module.rules里面添加对ts的支持(我这里的webpack版本是2.x)：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
{ test: /\.vue$/, loader: 'vue-loader', options: vueLoaderConfig }, { test: /\.tsx?$/, exclude: /node_modules/, use: [ "babel-loader", { loader: "ts-loader", options: { appendTsxSuffixTo: [/\.vue$/] } } ] } |
2. tsconfig.json 创建tsconfig.json文件，放在根目录下，和package.json同级 配置内容主要也看个人需求，具体可以去typescript的官网查看，但是有一点需要注意： 在Vue中，你需要引入 strict: true (或者至少 noImplicitThis: true，这是 strict 模式的一部分) 以利用组件方法中 this 的类型检查，否则它会始终被看作 any 类型。 这里列出我的配置，功能在注释中给出
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
{ "include": [ "src/*", "src/**/*" ], "exclude": [ "node_modules" ], "compilerOptions": { // types option has been previously configured "types": [ // add node as an option "node" ], // typeRoots option has been previously configured "typeRoots": [ // add path to @types "node_modules/@types" ], // 以严格模式解析 "strict": true, // 在.tsx文件里支持JSX "jsx": "preserve", // 使用的JSX工厂函数 "jsxFactory": "h", // 允许从没有设置默认导出的模块中默认导入 "allowSyntheticDefaultImports": true, // 启用装饰器 "experimentalDecorators": true, "strictFunctionTypes": false, // 允许编译javascript文件 "allowJs": true, // 采用的模块系统 "module": "esnext", // 编译输出目标 ES 版本 "target": "es5", // 如何处理模块 "moduleResolution": "node", // 在表达式和声明上有隐含的any类型时报错 "noImplicitAny": true, "lib": [ "dom", "es5", "es6", "es7", "es2015.promise" ], "sourceMap": true, "pretty": true } } |
3. 修改main.js 把项目主文件main.js修改成main.ts，里面的写法基本不变，但是有一点需要注意： 引入Vue文件的时候需要加上.vue后缀,否则编辑器识别不到 把webpack的entry文件也修改成main.ts 4. vue-shims.d.ts TypeScript并不支持Vue文件，所以需要告诉TypeScript*.vue文件交给vue编辑器来处理。解决方案就是在创建一个vue-shims.d.ts文件，建议放在src目录下再创建一个typings文件夹，把这个声明文件放进去，如：src/typings/vue-shims.d.ts，文件内容： *.d.ts类型文件不需要手动引入，TypeScript会自动加载
|
1 2 3 4 |
declare module '*.vue' { import Vue from 'vue' export default Vue } |
到这里TypeScript在Vue中配置就完成了，可以愉快的撸代码了~ 第三方插件库 现在Vue官方已经明确提出支持TypeScript，并考虑出一个对应的vue-cli，在这之前，Vue开发团队已经开发出了一些插件库来支持TypeScript，这里简单和大家介绍一下。 Vue-Class-Component vue-class-component是官方维护的TypeScript装饰器，写法比较扁平化。Vue对其做到完美兼容，如果你在声明组件时更喜欢基于类的 API，这个库一定不要错过 ps：用了这个装饰器之后写方法不需要额外加逗号，贼嗨~~~
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import Vue from "vue"; import Component from "vue-class-component"; @Component export default class App extends Vue { name:string = 'Simon Zhang' // computed get MyName():string { return `My name is ${this.name}` } // methods sayHello():void { alert(`Hello ${this.name}`) } mounted() { this.sayHello(); } } |
[…]
View Details解决 Nginx 部署 Vue 项目路由出现 404 的问题
代码如下:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
server { listen 80; server_name example.com; location / { root /home/example/dist; try_files $uri $uri/ @router; # 配置使用路由 index index.html index.htm; } # 路由配置信息 location @router { rewrite ^.*$ /index.html last; } } |
from:https://blog.csdn.net/peng2hui1314/article/details/106690852
View DetailsERROR in xxx.js from UglifyJs
ERROR in xxx.js from UglifyJs 问题 ERROR in app.bundle.js from UglifyJs Unexpected token: name «element», expected: punc «;» [app.bundle.js:106,8] 在用webpack对代码打包的时候报错，在网上找到了类似的答案，还是没有解决我的问题. 能解决大部分问题的链接 https://stackoverflow.com/questions/41254538/error-in-bundle-js-from-uglifyjs http://www.cnblogs.com/aredleave/p/7586911.html https://segmentfault.com/a/1190000011212544 按照以上方法对环境进行重新配置，依然报错！
|
1 2 3 4 |
ERROR in ./src/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module '@babel/core' babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'. |
报错原因 通过代码报错原因是 babel-loader 版本问题，因为 babel-loader 用的最新的版本，和 UglifyJs 不兼容. 解决方法 通过运行下面代码对babel-loader进行重新安装（低版本）. npm install --save-dev babel-loader@7 通过修改后的package.json配置文件，亲测可以正确打包，无报错现象.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
{ "name": "kankan", "version": "1.0.0", "description": "kankan", "main": "webpack.config.js", "scripts": { "start": "webpack-dev-server --open --config webpack.dev.js", "build": "webpack --config webpack.prod.js" }, "author": "kankan", "license": "ISC", "devDependencies": { "babel": "^6.23.0", "babel-core": "^6.26.3", "babel-loader": "^7.1.5", "babel-preset-es2015": "^6.24.1", "clean-webpack-plugin": "^2.0.1", "css-loader": "^2.1.1", "express": "^4.16.4", "html-webpack-plugin": "^3.2.0", "style-loader": "^0.23.1", "uglifyjs-webpack-plugin": "^2.1.2", "webpack": "^4.30.0", "webpack-cli": "^3.3.1", "webpack-dev-middleware": "^3.6.2", "webpack-dev-server": "^3.3.1", "webpack-manifest-plugin": "^2.0.4", "webpack-merge": "^4.2.1" } } |
奇卡奇卡 哈哈哈 个人主页：https://kankan.fun from:https://blog.csdn.net/qq_38025939/article/details/89576282
View Detailsvue报错：Module build failed: TypeError: this.getOptions is not a function
vue-cli构建项目使用sass报错 Module build failed: TypeError: this.getOptions is not a function 出现问题的原因是安装的sass-loader版本过高,选择安装较低版本的sass-loader即可。
|
1 |
npm install sass-loader@7.3.1 --save-dev |
Module build failed: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0. 出现问题的原因是安装的sass版本过高,选择安装4.0+版本的sass即可。
|
1 |
npm install node-sass@4.14.1 --save-dev |
from:https://www.cnblogs.com/chenjy1225/p/14930870.html
View Details