Vue -- 从vue-cli 到@vue/cli 安装

作者:神秘网友 发布时间:2021-01-28 17:50:08

Vue -- 从vue-cli 到@vue/cli 安装

从vue-cli到@vue/cli再到vue-antd-admin

安装与创建

  1. 如果你已经全局安装了旧版本的vue-cli (1.x 或 2.x),先卸载它
npm uninstall vue-cli -g 
# OR
yarn global remove vue-cli
  1. 可以使用下列任一命令安装@vue/cli
npm install -g @vue/cli
# OR
yarn global add @vue/cli

  1. 查看是否安装成功
vue --version

输出可能是这样:@vue/cli 4.5.11

  1. 创建项目
npm create vue-admin-demo

运行

cd vue-admin-demo

npm run server

参考博客

开发前的配置

  1. 相比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 {
      // 为开发环境修改配置...
    }
  }
}
  1. 模式和环境变量
.env.[mode]  # 只在指定的模式中被载入

一个环境文件只包含环境变量的“键=值”对:

.env.development
.env.staging
.env.production
  1. 按需配置vue.config.js

开发配置

  1. vue-router

  2. Ant Design of Vue

npm i --save ant-design-vue

根据文档进行配置
  1. 下载less less-loader
npm i less less-loader --save-dev
  1. 下载vuex
npm i vuex --save

从0开始进行不下去了,还是直接用吧

Ant Design Vue
vue-antd-admin
vue-element-admin
ruoyi

Vue -- 从vue-cli 到@vue/cli 安装 相关文章

  1. vue中vuex的五个属性和基本用法

    VueX 是一个专门为 Vue.js 应用设计的状态管理构架,统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data )。 Vuex有五个核心概念: state , getters , mutations , actions , modules 。 1. state:vuex的基本数据,用来存储变量 2.

  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

  3. 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

  4. 组件化开发1

    组件(Component)是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素,封装可重用的代码。 组件使用的基本流程 创建组件构造器对象 注册组件 使用组件 !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" titleTitle/title/headbodydiv id="app" my-

  5. 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,安全认证

  6. 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-

  7. 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

  8. 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

  9. 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

  10. vue 使用nextTick实现数据改变刷新组件

    需求场景:首页中顶部有切换tab,并且引入了多个自定义子组件展示各种数据,现在需要在切换tab时重新给各个组件赋值数据,实现实时刷新,让子组件重新渲染 实现: 子组件的mounted中使用nextTick //子组件 mounted(){ this.$nextTick(()= { this.initMap();/

每天更新java,php,javaScript,go,python,nodejs,vue,android,mysql等相关技术教程,教程由网友分享而来,欢迎大家分享IT技术教程到本站,帮助自己同时也帮助他人!

Copyright 2020, All Rights Reserved. Powered by 跳墙网(www.tqwba.com)|网站地图|关键词