vue-cli脚手架搭建项目
1.npm i -g @vue/cli2. vue --version3. vue create 项目名称 或者vue ui(界面性创建项目)第一次配置注意： 如果想删除默认的配置： 找到 C:\Users\用户名\.vuerc 文件，进行修改即可。 第一次配置的时候就按照上面去操作 以后可以用默认的配置...
2024-01-10
vue-cli创建vue项目
一、环境依赖安装1.在什么环境都没有的电脑上，首先是npm的依赖安装（百度上面教程很多，可自行搜索安装），可通过npm -v检查是否安装成功2.使用npm（需要安装node环境）全局安装webpack（注意：webpack 4.X 开始，需要安装 webpack-cli 依赖 ,所以使用这条命令 npm install webpack webpack-cli -g），打开命令行工...
2024-01-10
vue-cli3构建ts项目
1、构建项目vue create xxx上面的第一条，也就是 aaa 这一个选项在你第一次创建项目的时候是并不会出现的，只有你第一次创建完成项目后回提示你保存为默认配置模板，下次新建项目的时候就可以使用你选用的配置快速新建项目了，不需要再重新选择配置项目了。第二条选项便是 vue cli 3 默认的项目...
2024-01-10
创建Vue-cli 项目
首先 : 安装Vue -cli 安装的时候注意要获取cmd的管理员权限router路由可以先安装好, 选择启动方式的时候要自己cd到创建好的文件夹,然后输入npm install(创建依赖) ,最后输入 npm run dev 启动项目,默认是不启动浏览器.可以在config的index.js文件内修改自动启动浏览器和端口号码autoOpenBrowser:true 修改为true表示...
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-cli项目实现动态锚点定位
<template> <div id="app"> <header> <a href="javascript:void(0);" :class="active == \'#home\' ? \'active\' : \'\'" @click="toTarget(\'#home\')">首页</a> <a href="javascript:void(0);" :class="active == \'#team\' ? \'active\' : \'\'" @click="toTa...
2024-01-10
vue-cli3项目禁止eslint
如果一个vue项目是自己从头用脚手架vue-cli3创建的，那么在创建的时候就不要选择eslint，这个东西真的不好用，说是让新手代码更规范，其实就是让你的代码一下子有几十个无关紧要的报错，然后你需要去慢慢修改空格还是啥格式，反正对于学了vue没多久的的来说，挺鸡肋的一个东西； 但是很...
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项目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-10vue项目关闭eslint校验
简介eslinteslint是一个JavaScript的校验插件，通常用来校验语法或代码的书写风格。官方文档：https://eslint.org这篇文章总结了eslint的规则：Eslint规则说明关闭eslint校验有了eslint的校验，可以来规范开发人员的代码，是挺好的。但是有些像缩进、空格、空白行之类的规范，在开发过程中一直报错，未免太...
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
使用 vue-cli 3 快速创建 Vue 项目
为了便于 Vue 项目的管理， Vue 团队官方开发了 vue-cli 工具。本文将带您使用 vue-cli 快速创建一个 Vue 项目。本地安装 vue-cli使用 npm 全局安装 vue-cli ：npm i -g @vue/[email protected]创建项目执行：vue create my-project会弹出如下界面：选择套餐此处有两个选择：default (babel, eslint) 默认套餐，提供 babel 和 es...
2024-01-10
vue项目中的ESlint报错相关
ESLint是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具，使用它可以避免低级错误和统一代码的风格。但是有些时候这样的严格的校验未免显得有些严苛，以下介绍如何关闭ESlint:修改build\webpack.base.conf.js文件：然后在命令行中，重新npm run dev 启动项目即可...
2024-01-10基于vue-cli搭建多模块且各模块独立打包的项目
如果我们在开发系统A时，能够按模块划分生成多份静态资源包，最终的成果物中，会有多个子目录，每个子目录可独立运行，完成一个业务功能。这样的话，我们有任何系统需要我们开发过的任何模块，都可以直接打包指定的模块，灵活组装。优点： 1、可与其他系统灵活组装2、各个模块相互不受...
2024-01-10
Vue-cli单文件组件和路由和项目的初始化
以。vue结尾的文件是单文件组件，以前是这么写Vue.conponet('childe',{}）什么叫做路由？就是根据网址的不同，返回不同的内容给用户展示给用户的是APP.vue里的内容在app.vue里<template> <div id="app"> <img src="./assets/logo.png"> <router-view/> </div></template>router就是路由，显示当前路由地址所对应的内容...
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-cli项目打包出现空白页和路径错误的问题
vue-cli项目打包：1. 命令行输入：npm run build打包出来后项目中就会多了一个文件夹dist，这就是我们打包过后的项目。第一个问题，文件引用路径。我们直接运行打包后的文件夹中的index.html文件，会看到网页一片空白，f12调试，全是css，js路径引用错误的问题。解决：到config文件夹中打开index.js文件...
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
Vue-cli工程项目中各个文件夹及文件的作用分析
Vue-cli工程项目中各个文件夹及文件的作用分析1. build文件夹：存放webpack的相关配置以及脚本文件，在实际开发过程中只会偶尔用到webpack.base.conf.js，配置less、babel等编译器2. config文件夹：常用到此文件夹下 config.js（index.js） 配置开发环境的 端口号、是否开启热加载 或者 设置生产环境的静态资源相...
2024-01-10
