Vue -- 从vue-cli 到@vue/cli 安装
Vue -- 从vue-cli 到@vue/cli 安装
从vue-cli到@vue/cli再到vue-antd-admin
安装与创建
- 如果你已经全局安装了旧版本的vue-cli (1.x 或 2.x)，先卸载它
npm uninstall vue-cli -g
# OR
yarn global remove vue-cli
- 可以使用下列任一命令安装@vue/cli
npm install -g @vue/cli
# OR
yarn global add @vue/cli
- 查看是否安装成功
vue --version
输出可能是这样：@vue/cli 4.5.11
- 创建项目
npm create vue-admin-demo
运行
cd vue-admin-demo
npm run server
参考博客
开发前的配置
- 相比vue-cli少了很多配置build、config这些配置文件不开放了
可以在根目录下创建一个vue.config.js文件存放配置
参考官方文档：https://cli.vuejs.org/zh/guide/webpack.html
参考官方文档：https://cli.vuejs.org/zh/config/#vue-config-js
// vue.config.js
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
} else {
// 为开发环境修改配置...
}
}
}
- 模式和环境变量
.env.[mode] # 只在指定的模式中被载入
一个环境文件只包含环境变量的“键=值”对：
.env.development
.env.staging
.env.production
- 按需配置vue.config.js
开发配置
-
vue-router
-
Ant Design of Vue
npm i --save ant-design-vue
根据文档进行配置
- 下载less less-loader
npm i less less-loader --save-dev
- 下载vuex
npm i vuex --save
从0开始进行不下去了，还是直接用吧
Ant Design Vue
vue-antd-admin
vue-element-admin
ruoyi
Vue -- 从vue-cli 到@vue/cli 安装 相关文章
- vue中vuex的五个属性和基本用法
VueX 是一个专门为 Vue.js 应用设计的状态管理构架，统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data )。 Vuex有五个核心概念： state , getters , mutations , actions , modules 。 1. state：vuex的基本数据，用来存储变量 2.
- vue Failed to compile - by node-sass
页面错误提示 Failed to compile. ./src/assets/css/element-variables.scss (./node_modules/_css-loader@3.6.0@css-loader/dist/cjs.jsref--8-oneOf-3-1!./node_modules/_postcss-loader@3.0.0@postcss-loader/srcref--8-oneOf-3-2!./node_modules/_sass-l
- vue.js封装使用request.js
代码 import axios from 'axios';import { MessageBox, Message } from 'element-ui';import store from '@/store';import router from '@/router';import { setToken, getToken, removeToken } from "@/utils/cookies";// create an axios instanceconst se
- 组件化开发1
组件（Component）是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素，封装可重用的代码。 组件使用的基本流程 创建组件构造器对象 注册组件 使用组件 !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" titleTitle/title/headbodydiv id="app" my-
- Vue配合SpringCloud打包发布后，接口报net::ERR_INCOMPLETE_CHUNKED_ENCODING 200 (OK)
Vue配合SpringCloud打包发布后，接口报net::ERR_INCOMPLETE_CHUNKED_ENCODING 200 (OK) 背景 项目架构为Vue + SpringCloud，发布测试环境，页面用nginx代理，并转发ajax请求到SpringCloud gateway。 登陆接口在gateway中实现，gateway采用webflux，安全认证
- vue-color 颜色选择器插件用法介绍
npm i vue-color div divcolor-picker/div pChrome/p chrome-picker v-model="colors" / pSketch/p sketch-picker v-model="colors" / pPhotoshop/p photoshop-picker v-model="colors" / pMaterial/p material-picker v-model="colors" / pSlider/p slider-
- Vue之MVVM
Vue之MVVM 目录 Vue之MVVM MVVM MVC 关于MVC和MVVM的C和VM vue的MVVM 双向绑定的实现 MVVM M（数据模型model） 包含业务和数据逻辑验证等数据模型 V（视图模型view） 定义视图 VM（viewModel） view和model之间的桥梁，建立两者之间的往来 MVC M（数据模型mo
- vue $forceUpdate()强制刷新
改变列表的值 一直不渲染 van-pull-refresh v-model="refreshing" @refresh="onRefresh" van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :offset="10" :immediate-check="false" div class="comp" v-for="(ite
- vue-cli3 导入.md文件，markdown文件的渲染
package.json文件中添加以下依赖，然后重新运行npm install "vue-template-compiler": "2.6.10","github-markdown-css": "^4.0.0","highlight.js": "^10.5.0","html-loader": "^1.3.2","markdown-it": "^12.0.4","markdown-it-container": "^3.0.0","markdow
- vue 使用nextTick实现数据改变刷新组件
需求场景：首页中顶部有切换tab，并且引入了多个自定义子组件展示各种数据，现在需要在切换tab时重新给各个组件赋值数据，实现实时刷新，让子组件重新渲染 实现： 子组件的mounted中使用nextTick //子组件 mounted(){ this.$nextTick(()= { this.initMap();/