vue-cli3构建项目
亲手构建vue项目（feel good）：1. 打开cmd node -v查看自己电脑是否已经安装node（1）打印出node版本信息则表示已经安装并成功配置了环境变量；（2）提示node不是内部命令....有两种情况： a)node已经安装，但是环境变量没有配置正确 b)没有安装node，（去官网下载即可）2 .配置环境变量...
2024-01-10
vue-cli目录结构介绍
一个vue-cli的项目结构如下：1.build——[webpack配置]build文件主要是webpack的配置，主要启动文件是dev-server.js，当我们输入npm run dev首先启动的就是dev-server.js，它会去检查node及npm版本，加载配置文件，启动服务。2.config——[vue项目配置] config文件主要是项目相关配置，我们常用的就是当端口冲突时配置...
2024-01-10
vue使用vue-cli创建项目
安装运行环境（node和npm）安装vue-cli（查看是否安装成功vue -V）安装webpack新建项目1、vue init webpack 项目名称2、配置项目有关的信息（项目名称，开发者，描述，安装路由，使用eslint代码规范，测试单元）3、下载依赖模块后会出现启动项目的提示命令4、进入项目的文件夹下，，使用npm run dev来运行...
2024-01-10
vue-cli3项目中引入本地文件
组件内部使用本地json数据：之前用地图的json文件的时候，是在组件内部中通过import chinaData from ‘@/assets/china.json’，当然json文件直接放到了src的assets文件夹下，组件内直接就拿到了chinaData地图数据可以用public中的html文件直接用script标签引入本地文件但是这个本地文件是jquery和jquery.SuperSlide文件，...
2024-01-10
vue-cli 手机上浏览自己的项目
首先我们需要更改config文件拿我这个项目举例子，config文件下的index.js内的dev下的host需要更改为自己的电脑IP其次，重点来了，我们需要更改路径，细节的为什么我还解释不来，简单来说就是加个点，从根目录开始变为从当前目录开始：如图，build下的assetsPublicPath默认是 ：assetsPublicPath: '/'更改为as...
2024-01-10
手把手教你用vue-cli搭建vue项目
手把手教你用vue-cli搭建vue项目本篇主要是利用vue-cli来搭建vue项目，其中前提是node和npm已经安装好，文章结尾将会简单提到一个简单的例子。使用vue-cli搭建项目最开始我也是看网上的教程一步步搭下来，所以其中的一些步骤说法为了表达正确会进行一定参考。一、 项目使用技术、框架简单介绍我们...
2024-01-10
Vuejs实例-使用vue-cli创建项目
1，首先从官方网站下载安装Node.js，建议使用8.x版本，同时也会一并安装npm工具2，npm安装很慢（国外服务器），所以一般推荐使用npm淘宝镜像cnpm，先安装下cnpm:npm install -g cnpm --registry=https://registry.npm.taobao.org安装好cnpm后，以后使用npm的地方就可以使用cnpm替代了2.1，cnpm安装需要依赖外网，另外一种配...
2024-01-10
【Vue】使用vue-cli创建项目的时候出错
在使用vue-cli创建项目的时候出现如下报错：命令：vue create vue-hello报错：npm ERR! Unexpected end of JSON input while parsing near '...ant":"^2.2.2","semver'npm ERR! A complete log of this run can be found in:npm ERR! /Users/hope111/.npm/_logs/2018-05-27T08_16_41_717Z-debug.l...
2024-01-10
vue-cli项目代码提交仓库校验没使用的对象
在构建vue-cli 脚架的时候会提示是否使用eslint校验代码,而当使用eslint后，提交代码你会发现，只有文件里面有没有使用的变量，对象，或者参数的时候，代码是提交不了仓库的，会报错类似下面的错误，错误就是这个对象或者变量未定义或者使用一个就是关闭 eslint 校验一个就是在 .git文件删除掉 pre...
2024-01-10
vue-cli项目打包出现空白页和路径错误问题
vue-cli项目打包：1. 命令行输入：npm run build 打包出来后项目中就会多了一个文件夹dist，这就是我们打包过后的项目。第一个问题，文件引用路径。我们直接运行打包后的文件夹中的index.html文件，会看到网页一片空白，f12调试，全是css，js路径引用错误的问题。解决：到config文件夹中打开index.j...
2024-01-10
vue-cli项目无法用本机IP访问的解决方法
所遇问题启动vue-cli项目服务，用本机IP无法访问此网站，拒绝了我们的链接请求。从而无法从手机上预览效果原因分析在我们的bulid目录下有一个webpack.dev.config.js的配置文件，发现devServer对象里的host属性取自process.env.HOST || config.dev.host。于是这里我们去查看config.dev.host。在我们的config目录下有一个in...
2024-01-10
使用 vue-cli 快速构建一个 vue项目
之前说明了怎么手动构建一个项目，但是手动构建比较花时间，还要配置，下包，于是可以使用 vue-cli（vue脚手架）构建一个vue项目，很快，也很方便。第一步：新建一个放 vue项目 的文件夹，可以在桌面上，也可以是任意你想要的路径，在这里我新建了一个 appdemo1 的文件夹用于放 vue项目，然后打...
2024-01-10
vuecli脚手架——3.0版本项目案例
一、【准备工作】node与git部分见vue-cli2.0搭建案例vue-cli3.0是一个基于 Vue.js 进行快速开发的完整系统。有三个组件：CLI：@vue/cli 全局安装的 npm 包，提供了终端里的vue命令（如：vue create 、vue serve 、vue ui 等命令）CLI 服务：@vue/cli-service是一个开发环境依赖。构建于 webpack 和 webpack-dev-server 之上（...
2024-01-10
在vue-cli搭建的项目中增加后台mock接口
用vue-cli搭建一个前端开发环境确实是极其方便，在写前端代码肯定也是少不了需要调用后台提供的业务接口进行前后端交互，特别在敏捷开发中，前后端都要提前确定业务接口并进行打桩，在开发过程中基本是没有现成的后台可以调用，基本上都是自己写mock进行模拟。在vue-cli搭建的项目中，框架上...
2024-01-10
vue-cli4 的项目如何解决css权重问题？
问题一：比如说我有三个库，ui1、ui2、ui3 三个库，这三库里面都用了同一套 icon 体系，如何手动调整权重 有如下代码（icon 部分）[class*=" icon"]{font-size: 20px;}.ui1-btn{font-size: 14px;}// 这里需要注意，属性选择器和class选择器同级，只能靠优先级来区分基于上面代入三套库，得到一个处理后的.[class*=" ...
2024-02-18
vue-cli项目打包优化(webpack3.0)
1.修改source-map配置：此配置能大大减少打包后文件体积。 a.首先修改 /config/index.js 文件: // /config/index.js dev环境：devtool: 'eval'（最快速度） prod环境：productionSourceMap: false（关闭source-map） b.然后修改 /src/main.js 文件，关闭生产环境的调试信息 // /src/main.js const isDebug_mode ...
2024-01-10
vue-cli的webpack模板项目配置文件分析
build文件夹分析首先来看执行”npm run dev”时候最先执行的build/dev-server.js文件。该文件主要完成下面几件事情：检查node和npm的版本、引入相关插件和配置webpack对源码进行编译打包并返回 webpack compiler实例对象创建express服务器配置开发中间件（webpack-dev-middleware）和热重载中间件（webpack-hot-middleware）...
2024-01-10使用vue脚手架（vue-cli）搭建一个项目详解
1.首先得下载node.js。方法可自行百度。2.3.一开始报很多错误，后来用管理员就没问题了。4.5.如上图会遇到卡住的问题，解决方法是在最后一个选项上选择No,I will handle it myselft，然后cd vue_test，然后cnpm install，这样就成功了，然后执行npm run dev就出现：6.浏览器端访问localhost:8081 7.项目目录 8....
2024-01-10
详解vue-cli项目在IE浏览器打开报错解决方法
首先要知道VUE官网已表明仅支持IE8以上版本（不包括IE8），css弹性布局flex各浏览器支持如下:假如项目用到弹性布局，则项目仅支持IE10以上版本。另外兼容其他低版本的，请另寻它法。网上说的本人试了都是没用的，下面是亲自试验的解决方法。1. 问题 ：ie浏览器打开vue2.0项目空白,控制台报错 vuex ...
2024-01-10
（一）创建项目——vue-cli3实例：电商分类网页
教程跟学——实例部分：https://www.imooc.com/learn/1173代码：稍后上传github本系列博客仅为教程跟学时碰到的一些问题和总结的记录卸载vue-cli 2.9npm uninstall vue-cli安装vue-cli 3npm install -g @vue/cli创建项目npm create projectname根据需求配置 Q:gitbash无法用上下键移动光标A：Q: gitbash 如何清屏？A: 1) ctrl + L...
2024-01-10详解在vue-cli项目下简单使用mockjs模拟数据
为什么要用mockjs实际开发中，前后端分离，前端需要后端的接口去完成页面的渲染，但是并不能等到后端成员写完接口再开始进行测试。大部分情况下，前后端需要同时进行开发。因此便需要mockjs制造随机数据来进行后端接口模拟。看了官方文档之后一脸懵逼，这些都是什么鬼？？？？？因此总结了...
2024-01-10
使用vue-cli构建工具构建vue项目时候组件的使用
<template> <div class="contains"> <!-- <div class="main"> <swiper :options='swiperOption' :not-next-tick=''></swiper> </div> --> <slide > <div v-for="(item,index) in banner" :data='sliderarr' :key="item+index">...
2024-01-10深入理解Vue-cli搭建项目后的目录结构探秘
我最近也在研究Vue-cli的路上，今天了解一下Vue-cli目录结构，那么今天也算个学习笔记吧！一、前言这里先说一下使用vue-cli之前的事情。由于刚刚接触Vue不久，就接到了一个移动端项目，于是打算使用vue来进行一次尝试，所以按照练习时候的样子，emmm先把vue.js引入网页里来，emmm自己的外联main.css样...
2024-01-10vue初尝试--项目结构(推荐)
新建一个项目之后，我们来看一下项目的目录结构几个主要文件的内容index.html文件（入口文件，系统进入之后先进入index.html）<!DOCTYPE html><html> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>blog</title> </head> <body><div id="app"></div><!-- built fil...
2024-01-10
