一、Vue CLI 2
Vue-CLI脚手架基本使用和Vue2项目结构及路由
Vue-CLI脚手架基本使用Vue-CLI(俗称：vue脚手架)是vue官方提供的、快速生成vue工程化项目的工具。特定：开箱即用基于webpack功能丰富且易于扩展支持创建vue2和vue3的项目中文网首页：https://cli.vuejs.org/zh/安装vue-clivue-cli是基于Node.js开发出来的工具，因此需要使用npm将它安装为全局可用的工具：# 全局安装vue-cli
日期 2023-06-12 10:48:40Vue-cli搭建的项目中路径别名的配置
路径别名配置分别有两种方式首先展示一下项目结构 对照项目结构配置在项目根目录下创建vue.config.js文件module.exports = { configureWebpack: { resolve: { alias: { "assets": "@/assets", "common&qu
日期 2023-06-12 10:48:40
IntelliJ IDEA使用 vue-cli 创建Vue项目
步骤创建的名字自己定义你会发现什么都没有,这就对了,接下来 右键自己创建的项目或者模块–> Open in Terminal点击后会打开控制台,并且是你项目或者模块的文件夹下:输入命令:vue init webpack复制提示:oject in current directory? (Y/n) 输入 :y 提示:? Project name 这里就是作者名称,输入自己的或者直接回车(有可能
日期 2023-06-12 10:48:40Vue-CLi2配置打包环境
config文件夹内容修改一、index.js修改'use strict' // Template version: 1.3.1 // see http://vuejs-templates.github.io/webpack for documentation. const path = require('path') module.exports =
日期 2023-06-12 10:48:40vue cli 中的 import 和 export
1. vue cli 入口文件public/index.html 类似PHP框架的 public/index.php2. 全局脚本文件 main.js 项目入口import 和 require 是JS模块化编程使用require/exports 是CommonJS/AMD中为了解决模块化语法而引入的import/export （导入/导出） 是ES6引入的新规范，因为浏览器引擎兼容问题，需要在no
日期 2023-06-12 10:48:40Vue cli4 图片地址引入的几种方式
五种图片地址引入方式@开头，它也会作为一个模块请求被解析。它的用处在于Vue CLI默认会设置一个指向项目根目录/src的别名@
日期 2023-06-12 10:48:40
Vue2.0 搭建Vue脚手架（vue-cli）详解编程语言
Vue.js是一套构建用户界面的渐进式框架。Vue 只关注视图层，采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 阅读之前需要了解的知识 javascript node.js环境(npm包管理工具） webpack打包工具 安装node.js 从node官网下载并安装node，安装步骤很简单，只要一路“next”就可以了。安装
日期 2023-06-12 10:48:40Vue笔记：安装配置node.js及使用vue-cli创建项目
Node.js安装配置 安装配置教程：https://www.cnblogs.com/aizai846/p/11441693.html 注意：使用npm下载包的时候配置代理 临时使用淘宝镜像 npm --registry https://registry.npm.taobao.org install -global 包名 永久配置淘宝镜像 npm install -globa
日期 2023-06-12 10:48:40使用Vue-cli 脚手架生成的项目使用Vetur+ Prettier + ESlint的配置设置代码规范和格式
使用Vue-cli 脚手架生成的项目使用Vetur+ Prettier + ESlint的配置设置代码规范和格式 先安装插件.Vetur+ Prettier + ESlint 1、ESlint设置 文件.eslintrc.js中的配置 1 module.exports = { 2 root: true, 3 env: { 4 n
日期 2023-06-12 10:48:40
VUE字符串模板@click失效
因为字符串模板不能被vue所渲染，所以这种方式行不通。 可采用组件的方式 父组件 <template> <div id="app"> <My v-for="(v,index) in commentList" :key="index" :commentId="v"/> </div> </template>
日期 2023-06-12 10:48:40
vue - @click 传参删除
<template> <div id="app"> <div v-for="todo in todos" :key="todo.id"> &n
日期 2023-06-12 10:48:40
vue-cli 3.0 index.html引入第三方js文件
index.html 引入： <!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="widt
日期 2023-06-12 10:48:40vuecli4项目部署到服务器
vuecli4项目编译部署到腾讯云服务器 本地进行打包编译： npm run build 项目根目录下面有一个dist文件夹，里面的Index.html和static就是要上线的文件。 在腾讯云服务器的/home里面创建文件 mkdir vuePro 将Index.html和static文件压缩成dist.zip，并将dist.zip上传到/home/vuePro并解压。 配置nginx
日期 2023-06-12 10:48:40vue-cli3.0 使用postcss-plugin-px2rem（推荐）和 postcss-pxtorem（postcss-px2rem）自动转换px为rem 的配置方法；
源文件链接： https://www.cnblogs.com/taohuaya/p/10274993.html 如何在vue-cli3.0中使用postcss-plugin-px2rem 插件 插件的作用是 自动将vue项目中的px转换为rem 。 为什么这三个中要推荐 postcss-plugin-px2rem呢？ 因为 postcss-plugi
日期 2023-06-12 10:48:402-2 vue环境搭建以及vue-cli使用
一.vue多页面应用文件引用 1.官网拷贝: <script src="https://cdn.jsdelivr.net/npm/vue"></script> 2.npm安装, 安装vue包 $ npm install vue --save 3.npm安装的包都在node_modules目录下, 文件引入dist下的文件 <scr
日期 2023-06-12 10:48:40vue-cli3的eslint配置问题
vue-cli3按照官网教程配置搭建后，发现每次编译，eslint都抛出错误 error: Expected indentation of 4 spaces but found 0 (indent) at src\views\User.vue:26:1: 1 error found. 1 error potentially fixable with the `--fix` option.
日期 2023-06-12 10:48:40vue.js3:使用clipboard.js实现复制到剪贴板(vue@3.2.37 / clipboard@2.0.11)
一，安装clipboard.js 1，官网: https://clipboardjs.com/ 代码地址 https://github.com/zenorocha/clipboard.js 在npmjs的地址 https://www.npmjs.com/package/clipboard 2,安装 liuhongdi@lhdpc:/data/vue/axios$ n
日期 2023-06-12 10:48:40npm升级自身和@vue/cli (node v14.17.1)
一，npm升级自身 1,查看当前npm的版本: root@lhdpc:/usr/local/source# npm -v 6.14.13 2，升级npm root@lhdpc:/usr/local/source# npm install -g npm /usr/local/soft/node-v14.17.1-linux-x64/bin/npm -> /usr/local/s
日期 2023-06-12 10:48:40linux:ubuntu21.04:npm安装@vue/cli时报错(@vue/cli 4.5.13/npm 7.21.0/node 14.17.1)
一，第一次安装时报错: root@lhdpc:/usr/local/source# npm install -g @vue/cli npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and
日期 2023-06-12 10:48:40vue-cli 本地数据模拟
方法一： 使用express搭建静态服务 mock数据写在json文件中，proxyTable 里将接口代理到具体mock数据json文件上。具体方法： 创建 mock 文件夹 build/dev-server.js 中添加如下代码 npm run dev 启动后，可以通过 http://localhost:8080/mock/db.json 访问数据，pr
日期 2023-06-12 10:48:40vue-cli 工程中引入jquery
在vue-cli 生成的工程中引入了jquery，记录一下。(模板用的webpack) 首先在package.json里的dependencies加入"jquery" : "^2.2.3"，然后install 在webpack.base.conf.js里加入 var webpack = require("webpack") 在module.exports的最后加入 plugins: [new w
日期 2023-06-12 10:48:40vue-cli内部webpack的打包优化
在此之前，我们先谈谈前端项目的性能优化。 优化前端项目无非就是2方面的优化： 一、网络性能优化（重点） 减少请求数量（webpack的天职就是打包） 减少请求资源大小（压缩gzip,后端会完成） CDN加速、负载均衡（运维负责） 二、运行性能优化 减少DOM操作 减少图片数量 显而易见的，我们前端除了一些游戏、WEBGL项目、有大量DOM操作项目之外，运行性能都不至于太差，所以我们接下来
日期 2023-06-12 10:48:40@vue/cli 4.5.13:创建一个vue.js3.x项目(vue.js 3.2.4)
一，进入项目所在的父目录，创建项目 liuhongdi@lhdpc:~$ cd /data/vue/ liuhongdi@lhdpc:/data/vue$ vue create demo1 如图: 选择vue 3,然后回车， 如图: 完成后如图: 说明：刘宏缔的架构森林是一个专注架构的博客，地址：https://www.cnblogs.com/architectforest &
日期 2023-06-12 10:48:40linux:ubuntu21.04:npm安装@vue/cli时报错(@vue/cli 4.5.13/npm 7.21.0/node 14.17.1)
一，第一次安装时报错: root@lhdpc:/usr/local/source# npm install -g @vue/cli npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and
日期 2023-06-12 10:48:40从vue-cli2.x升级到@vue/cli 4.x(node v14.15.0 / vue.js 3.0)
一，查看当前安装的vue-cli的版本: 1,vue-cli的官方站地址: https://cli.vuejs.org/ 2,查看本机安装的vue-cli的版本 [liuhongdi@localhost ~]$ vue --version 2.9.6 [liuhongdi@localhost ~]$ vue -V 2.9.6 3,查看npm支持的vue-cl
日期 2023-06-12 10:48:40vue系统修饰符：@click.ctrl.exact CTRL键
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g
日期 2023-06-12 10:48:40【视频】vue指令之@click及其stop修饰符
P2vue指令之@click及其stop修饰符 https://www.bilibili.com/video/av91679349?p=2
日期 2023-06-12 10:48:40怎样使用vue cli脚手架工具快速搭建vuejs项目和配置文件的具体步骤
1，安装nodejs环境： 如果以前没有安装过nodejs 2，使用淘宝镜像：npm config set registry http://registry.npm.taobao.org/ 3，全局安装vue-cli npm install --global vue-cli 或
日期 2023-06-12 10:48:40使用nodejs&webpack&vue-cli脚手架工具搭建项目
搭建环境： 1，使用淘宝npm镜像： http://npm.taobao.org/ npm install -g cnpm --registry=https://registry.npm.taobao.org 2，安装脚手架工具 cnpm i vue-cli -g 3
日期 2023-06-12 10:48:40vue-cli打包之后的项目在nginx的部署
vue-cli执行 npm run build 进行打包，生成dist文件夹，把该文件夹下的文件直接复制到nginx服务器目录下，就可打开项目，但是只有首页是可以看到的，再刷新一下就404了，原因是vue的项目为单页应用，路由找不到所致。所以要在nginx服务器配置对所有的路径或者文件夹进行跳转。重定向到首页index下，这样就都能找到路由了。 location / { t
日期 2023-06-12 10:48:40vue-cli-service同时启动Local和Network访问
今天有同事咨询如何让Vue工程同时启动Local和Network访问，我一看其脚本信息，指定了--host的值为一个具体的IP或者是域名，这样的话你只能通过IP或者域名的方式访问服务，但是不能通过localhost域名的方式访问；为了能够通过localhost的方法访问，可以将--host的值设置为localhost，但是此时你不能够通过IP来访问了；为了能够让本地既能通过localhost
日期 2023-06-12 10:48:40