vue-cli脚手架搭建项目
1.npm i -g @vue/cli2. vue --version3. vue create 项目名称 或者vue ui(界面性创建项目)第一次配置注意： 如果想删除默认的配置： 找到 C:\Users\用户名\.vuerc 文件，进行修改即可。 第一次配置的时候就按照上面去操作 以后可以用默认的配置...
2024-01-10
vue-cli3构建ts项目
1、构建项目vue create xxx上面的第一条，也就是 aaa 这一个选项在你第一次创建项目的时候是并不会出现的，只有你第一次创建完成项目后回提示你保存为默认配置模板，下次新建项目的时候就可以使用你选用的配置快速新建项目了，不需要再重新选择配置项目了。第二条选项便是 vue cli 3 默认的项目...
2024-01-10
如何导入一个vue-cli项目
1、进入项目目录2、保证npm和vue已经安装npm -v 查看npm是否安装vue -V 查看vue是否安装3、npm install 安装依赖4、npm run dev【vue是向下兼容的，可以导入不高于当前vue版本的项目】...
2024-01-10
vue入门之vue-cli安装项目
第一步先安装nmp 在node.js的官网下载即可。第二步 直接安装刚下载好的node.js即可，（这里建议不要修改node.js的安装路径），傻瓜式直接下一步即可检测是否安装成功： 在cmd的控制台直接输入node -v如果出现这样的界面恭喜你node.js安装成功（利用 win + r 键打开服务，之后输入cmd即可打开终端...
2024-01-10
vue-cli3项目禁止eslint
如果一个vue项目是自己从头用脚手架vue-cli3创建的，那么在创建的时候就不要选择eslint，这个东西真的不好用，说是让新手代码更规范，其实就是让你的代码一下子有几十个无关紧要的报错，然后你需要去慢慢修改空格还是啥格式，反正对于学了vue没多久的的来说，挺鸡肋的一个东西； 但是很...
2024-01-10
vue-cli 手机上浏览自己的项目
首先我们需要更改config文件拿我这个项目举例子，config文件下的index.js内的dev下的host需要更改为自己的电脑IP其次，重点来了，我们需要更改路径，细节的为什么我还解释不来，简单来说就是加个点，从根目录开始变为从当前目录开始：如图，build下的assetsPublicPath默认是 ：assetsPublicPath: '/'更改为as...
2024-01-10
vue-cli4.5.x快速搭建项目
一、安装vue-clinpm i @vue/cli -g二、创建项目vue-cli会创建一个完整的项目文件夹,内部包含src等,我们仅需要cd进打算放置这个项目文件的文件夹内执行如下代码即可;1.生成项目文件;终端输入:vue create projectname2.选择生成配置方式此处选择最下面一项进行手动配置(你要是喜欢用eslint就直接选vue3那项...
2024-01-10
利用vue-cli搭建项目后的目录结构
npm install -g vue-clivue init webpack my-project(项目名称) 后的目录结构：-----build webpack配置相关-----config webpack配置相关-----node-modules npm install 安装的依赖代码库-----src 存放项目源码-----static ...
2024-01-10
vue-cli项目中怎么使用mock数据
在vue项目中, mock数据可以使用 node 的 express模块搭建服务1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data.json 文件2.在build目录下的 dev-server.js的文件作如下更改var appData = require('../test/data.json')// 获取数据var apiRoutes = express.Router();//get请求apiRoutes.get('/seller',f...
2024-01-10
利用vue-cli快速创建一个vue项目
快速开始第一个vue项目概述本教程使用如下环境window 10 家庭中文版npm 6.2.0vue-cli 3.0.5webstorm首先，你需要安装npm ，如果你已经安装了npm，并且对npm 有一定了解了，你就可以继续往下走了。# 测试npm安装是否成功，本教程用的版本是6.2.0npm -v6.2.0然后安装vue-cli# 安装vue-cli，本教程用的版本是3.0...
2024-01-10
手把手教你用vue-cli搭建vue项目
手把手教你用vue-cli搭建vue项目本篇主要是利用vue-cli来搭建vue项目，其中前提是node和npm已经安装好，文章结尾将会简单提到一个简单的例子。使用vue-cli搭建项目最开始我也是看网上的教程一步步搭下来，所以其中的一些步骤说法为了表达正确会进行一定参考。一、 项目使用技术、框架简单介绍我们...
2024-01-10
vue项目el-input键盘事件
一、 结合elemt-ui的 el-input 输入框 ，当输入之后敲回车想要搜索@keydown.enter.native=”searchEnterFun”<el-input placeholder="搜索" v-model="barCode" @keyup.enter.native="searchEnterFun" autofocus clearable></el-input>二、普通input的键盘事件非 element-UI 组件，直接 @keyup.enter 就可以。<input placeho...
2024-01-10
18-vue-cli脚手架项目中组件的使用
在webpack-simple模板中，包括webpck模板。一个.vue文件就是一个组件。 为什么会这样呢？因为webpack干活了！webpack的将我们所有的资源文件进行打包。同时webpack还能将我们的html（template）、css、js文件通过模板编译的方式将这些文件打包成一个.vue的文件。为什么在vue-cli项目中能使用.vue的文件？比如有...
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-10vue-cli项目修改文件热重载失效的解决方法
遇到一个很奇怪的问题，就是之前vue-cli创建的项目，在起初修改文件可以热重载，但是后面突然间就无法无刷新浏览器更新了，一只以为是热重载出问题了，折腾了半天也没纠结出什么结论，最后百度了一下，原来是编译器webstrom的锅。问题原因在webstrom系统设置中有一项配置，是 Use “safe write”(save...
2024-01-10
搭建Vue脚手架（vue-cli）并创建一个项目
利用vue脚手架搭建项目，需要有nodejs环境、vue-cli一、必备环境查看是否安装（本机已安装） 若没有安装，可以进行安装1.安装nodejs环境官网下载：https://nodejs.org/en/download/ 查看是否安装成功，成功后进行下一步2.安装vue-cli（建议用cnpm安装，较快）先安装淘宝镜像 npm install cnpm -g --registry=https://re...
2024-01-10vue-cli2.0转3.0之项目搭建的详细步骤
Vue CLI介绍Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：通过 @vue/cli 搭建交互式的项目脚手架。通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。一个运行时依赖 (@vue/cli-service)，该依赖：可升级；基于 webpack 构建，并带有合理的默认配置；可以通过项目内的配置文件进行配...
2024-01-10
React-music 全家桶项目
React-Music 全家桶项目一、简介该项目是基于React全家桶开发的一个音乐播放器，技术栈采用：Webpack + React + React-redux + React-router + Node + Sass + Es6 + Localstorage + Css3，基本音乐API使用http-proxy酷狗音乐的，在此感谢酷狗音乐！项目涉及的知识点非常广泛，基于react全家桶技术都有使用，独立开发，精品之作...
2024-01-10基于vue-cli搭建多模块且各模块独立打包的项目
如果我们在开发系统A时，能够按模块划分生成多份静态资源包，最终的成果物中，会有多个子目录，每个子目录可独立运行，完成一个业务功能。这样的话，我们有任何系统需要我们开发过的任何模块，都可以直接打包指定的模块，灵活组装。优点： 1、可与其他系统灵活组装2、各个模块相互不受...
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-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-10vue-cli项目根据线上环境分别打出测试包和生产包
最近用vue-cli搭建了项目，准备上线时发现脚手架自带的npm run buil只能打出请求生产接口的生产包，但是项目肯定要先上测试环境，怎么用命令行打出请求测试接口的测试包呢？Step1: package.json中新增命令行脚本test命令,并指向build文件夹下的test.js。"scripts": { "dev": "webpack-dev-server --inline --progress --config ...
2024-01-10
vue-cli4项目开启eslint保存时自动格式问题
最近新建一个vue-cli4的项目，初始化的时候没开启eslint，后面想开启的时候不好配置，这里就做个开启eslint和保存时自动修复格式的总结vscode首先安装eslint插件配置vscode的自动保存eslint格式Ctrl+shift+p把下面代码复制到里面"editor.tabSize": 2, "eslint.alwaysShowStatus": true, "eslint.autoFixOnSave": true, "eslint.p...
2024-01-10
vue-cli4构建项目，与vue-cli3构建项目的区别
vue-cli中文文档：https://cli.vuejs.org/zh/guide/#%E8%AF%A5%E7%B3%BB%E7%BB%9F%E7%9A%84%E7%BB%84%E4%BB%B6今天把vue-cli3的项目升级到了vue-cli4，想着用vue-cli4构建的项目有什么区别，于是就想用vue-cli4构建个新项目看看：在桌面新建一个文件夹，用vscode打开这个文件夹，在cos窗口输入：vue create new_app 让选择一项预配置：hhh...
2024-01-10
