搭建vue-cli
1．什么是vue-clivue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。vue-cli是有Vue提供的一个官方cli，专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成vue.js+webpack的项目模板，是为现代前端工...
2024-01-10
vue-cli脚手架
安装全局环境安装，不必要在项目地址下安装：npm install -g vue-cli卸载全局卸载：npm uninstall -g vue-cli查看是否安装成功：vue list查看vue版本，vue -V 回车，查看vue最新的版本。 使用进入到编辑器主目录下==>vue init webpack 项目名，最终结果是创建一个项目vuecli：接着在命令行安装依赖模块：cd vuecli ==>...
2024-01-10
vue-cli需要的包
npm install webpack webpack-dev-server --save-devnpm install vue-loader vue-html-loader css-loader vue-style-loader vue-hot-reload-api --save-devnpm install babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 --save-devnpm inst...
2024-01-10
vue-cli热更新问题
平时在开发中对 接多个后台 会连他们的后台地址 在vue.config.js中的proxy来控制与哪个后台对接 但是每次切换后台接口地址的时候项目都需要重新启动才可以 有没有什么方案可以切换后台地址不重启项目就能直接开发呢回答：提供一种脑洞较偏的思路：把 proxy 的 targte 重定向的目标改为一个平常访问不到或不需访问的域名，比如 facebook.com ，然后安装一个 switchH...
2024-03-10
vue-cli脚手架安装
vue-cli脚手架安装1.首先安装npm和node.js2.安装webpack和vue-clivue全家桶之一的vue-cli可以帮我们快速搭建vue项目1.首先安装npm和node.js进入npm官网点击安装点击下载一般下载LTS就好2.安装webpack和vue-cli安装完毕后打开node.js的控制台先分别输入node -v和npm -v检查是否安装成功如果出现了版本号就表示...
2024-01-10
vue-cli的使用指南
vue-cli 2.0安装vue-clinpm install -g vue-cli创建一个项目模板vue init <template-name> <project-name>template-name:wepack 功能齐全的Webpack + vue-loader设置，具有热重载，linting，测试和css提取功能。webpack-simple 一个简单的Webpack + vue-loader设置，用于快速原型设计browserify 全功能的Browserify + vueify设置，具有热重载...
2024-01-10
vue-cli3组件嵌套
如下项目：App.vue 父组件<template> <div id="app"> <Vheader/> <! -- 使用组件 将子组件Vheader.vue作为父组件App.vue的头 --> <img alt="Vue logo" src="./assets/logo.png"> <h1>{{res}}</h1> <! -- res是父组件自己的数据 --> </div></template><script>import Vheader from './components/...
2024-01-10
vue-cli快速原型开发
我们知道vue-cli提供了一套如何快速搭建vue开发脚手架的工具，虽然好用，但是有的时候我们还是嫌麻烦，因为就想快速开发调试一个组件，这时我们就可以使用vue-cli 3.x以上版本的一个好特性： vue serve了！具体的：1. 先uninstall掉老版本的vue-cli， npm uninstall vue-cli -g2. 安装新版本的vue-cli(注意名字也变...
2024-01-10
vue-cli 脚手架安装
安装vue-cli 脚手架 2.9.6初始化webpackVue init webpack my-appCd 更改目录然后 npm run devhttp://localhost:8080/安装axiosuicnpm I element –ui -s...
2024-01-10
vue-cli 发布（译）
如果你现在正在使用Vue.js，当你构建一个原型的时候，你所需要做的通常就是通过<script>把Vue.js引入进来，然后就完事了。但是真实情况往往不是这样的。当我们真正开发一个应用的时候，我们不可避免的会用到一大堆的工具，模块化、预处理器、热模块加载、代码校验和测试。这些工具对于一个需要...
2024-01-10
vue-cli3分环境打包
1.package.json添加命令scripts": {“dev”: “vue-cli-service serve”, //本地运行时process.env.NODE_ENV ===‘development’(默认)“build:pre”: “vue-cli-service build --mode pre”, //dev模式下打包(测试服打包)，process.env.NODE_ENV的值为’.env.dev文件中NODE_ENV声明的值’“build”: “vue-cli-service build”...
2024-01-10
vue-cli脚手架构建过程
vue脚手架构建过程才开始接触前端不久，经常忘记脚手架的构建过程，写给自己看的。1、确保你已经安装好了node.js，并且npm（或cnpm）处于可用状态2、全局安装必要的构建工具webpack和vue的脚手架构建工具vue-cli，命令行如下：cnpm i -g webpack cnpm i -g vue-cli （i是install的简写）3、切换到你需要构建vue...
2024-01-10
vue-cli路由的一些补充
上一节，学习了vue-cli的一些常见用法，接下来，来学习一下vue的另外一些常见的用法。 1.路由的router.go|push|repale方法 这些方法的作用都是导航到不同的url. push:当你单击，<router-link :to="/user">标签的时候，在程序内部其实是执行了router.push（".user"）。这个方法。 go:router.go(n)...
2024-01-10
vue-cli3快速原型开发
先来讲一下，什么是快速原型开发。当我们需要紧急或提前开发单独的一个页面时，有时候不需要在原项目中创建一个页面，再开发，我们可以单独的区开发这个项目，那么怎样单独的区开发这个项目呢，之前使用过vue-cli的都知道，用vuecli创建出来一个项目需要有各种配置啊，入口文件啊，出口文件...
2024-01-10
vue-cli 详细使用说明
初始化安装 node全局安装 webpack 和 vue-clicnpm i webpack vue-cli -g用 vue-cli 来构建项目在D盘新建一个文件夹（kxw-vue-cli）作为项目存放地，然后使用命令行cd进入到项目目录输入：vue init webpack kxwkxw 是自定义的项目名称，命令执行之后，会在当前目录生成一个以该名称命名的项目文件夹。输入命令...
2024-01-10
vue-cli脚手架(框架)
一、创建vue项目npm install vue-cli -g #-g全局(sudo)npm install vue-cli -g #mac笔记本vue-init webpack myvue #项目的名字cd muvuenpm installnpm run dev二、目录结构的说明出现下面这样的图就说明成功了三、import和require的区别import一定要放在文件顶部，他相当于一个指针引用了文件，并没有吧文件包含进来，需要...
2024-01-10
vue-cli中配置sass
如何配置sass一、安装对应依赖node模块：npm install node-sass --save-devnpm install sass-loader --save-dev二、打开webpack.base.config.js在loaders里面加上 1 rules: [ 2 { 3 test: /\.vue$/, 4 loader: 'vue-loader', 5 options: vueLoaderConfig 6 }, 7 ...
2024-01-10
vue-cli常用插件安装教程
1.安装sassnpm i sass-loader node-sass --save-dev2.安装styluscnpm install stylus --save-devcnpm install stylus-loader --save-dev3.安装导出excel参考文档：https://www.cnblogs.com/qiu-Ann/p/7743897.htmlnpm install -S file-savernpm install -S xlsxnpm install -D script-loade...
2024-01-10
Vue：使用vue-cli（二）
一、安装npm install -g vue-cli二、初始化项目vue init webpack my-project三、启动项目cd my-projectnpm run dev...
2024-01-10
安装vue-cli报错内容是这个
这个是敲了sudo vue init webpack name之后百度了 permission denied 的报错 又安装了sudo npm install webpack -g --unsafe-perm=true --allow-root又装了一遍 还是报这个错 这是为啥回答意思是没有权限创建文件，有些系统的命令行需要通过管理者模式打开才行。...
2024-01-10
详解vue-cli3多环境打包配置
最近下载了vue-cli3,研究了下vue-cli3下多环境的配置。首先，安装vue-cli3。npm install -g @vue/cli安装好之后的项目是这样的，见下图：相比较vue-cli2的项目，缺少了build和config目录，另外static目录也没了，多了个public目录。配置文件需要自己写一个vue.config.js,可以参考官方文档文档写，网址https://cli.vuejs.o...
2024-01-10
vue-cli怎么和后台实时编译？
我现在的问题是 这个index是需要后台Tomcat上用的 但是这个index需要的js文件和静态文件都在dist(webpack打包过的)目录里面 那如果我现在想编译src里面的文件怎么让他也能实时编译到dist文件里面？不可能修改一点代码就npm run build一下...那是不是太麻烦了- -。是不是编译的时候就需要配置什么？现在想要...
2024-01-10
vue-cli3中eslint报错
解决办法：配置 .eslintrc.js 文件consol报错：配置 'no-console': 'off'ES6 import等报错：配置 "parser": "babel-eslint"module.exports = { rules: { 'no-console': 'off', 'parser':'babel-eslint' }}重新运行即可...
2024-01-10vue-cli3配置与跨域处理方法
安装 vue-cli3 环境准备1. 如果您已安装 vue-cli2 ，请先删除当前脚手架，否则无法成功安装 vue-cli3 。 npm uninstall vue-cli -g2. 检查 node.js 版本。 vue-cli3 需要 node 版本大于8.9。在cmd中输入 node -v 查看版本。如果版本过低，请先去 node官网 中下载高版本。 安装脚手架vue-cli3的包名有 vue-cli 改为 @vue/cli 。 使...
2024-01-10
基于vue-cli配置移动端自适应
移动端自适应：手淘的 lib-flexible + rem配置 flexible安装 lib-flexible在命令行中运行如下安装：1npm i lib-flexible --save 引入 lib-flexible在项目入口文件 main.js 里 引入 lib-flexible12// main.jsimport \'lib-flexible\' 添加 meta 标签在项目根目录的 index.html 中添加如下 meta1<meta name="viewport" con...
2024-01-10
