vue开发模板-CFANZ编程社区

安装vue

关于旧版本

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

Node 版本要求

Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

可以使用下列任一命令安装这个新的包：

npm install -g @vue/cli
OR

yarn global add @vue/cli

安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。

你还可以用这个命令来检查其版本是否正确：

vue --version

安装less

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

Less 可以运行在 Node 或浏览器端。

npm i less less-loader --save-dev
OR
yarn add less less-loader --save-dev

安装flexible.js

npm i -S amfe-flexible
OR
yarn add -S amfe-flexible
在main.js引入flexible

import 'amfe-flexible/index.js'

安装px2rem-loader

npm install px2rem-loader --save-dev
OR
yarn add px2rem-loader --save-dev

添加vue.config.js配置

module.exports = {
  lintOnSave: false,//关闭eslint
  css: {
    loaderOptions: {
      postcss: {
        plugins: [require('postcss-px2rem')({
          // 以设计稿750为例， 750 / 10 = 75                        
          remUnit: 192
        }),
        ]
      }
    }
  },
};

重置浏览器样式—安装normalize.css

yarn add normalize.css --save

结束

less问题 this.getOptions is not a function

antd按需引入遇到的less和less-loader版本问题
解决办法：降低less和less-loader的版本
先yarn remove less,再 yarn add less@^2.7.3
先yarn remove less-loader,再 yarn add less-loader@^5.0.0

安装echarts

npm install echarts --save
全局引入
import * as echarts from 'echarts';
按需加载

import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import {
    BarChart
} from 'echarts/charts';
// 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
import {
    TitleComponent,
    TooltipComponent,
    GridComponent
} from 'echarts/components';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import {
    CanvasRenderer
} from 'echarts/renderers';

// 注册必须的组件
echarts.use(
    [TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer]
);```