vue-cli3创建项目及echarts在vue项目中如何使用

vue脚手架是一个命令行工具，用来快速生成vue项目基础架构，官网：https://cli.vuejs.org/zh/

一、环境准备

1、安装node.js

官网下载：https://nodejs.org/en/download/

由于node.js官网为外国网站，利用npm下载东西较慢，可以采用淘宝镜像cnpm。

下载cnpm命令：npm i -g cnpm --registry=https://registry.npm.taobao.org

2、安装vue-cli 脚手架构建工

旧版本的安装（2.x）：cnpm install -g vue-cli

新版本的安装（3.x以上 ）：cnpm install -g @vue/cli

cnpm install -g @vue/cli这种安装是安装的最新版本

vue版本从4降到3：

卸载：npm uninstall -g @vue/cli

重装：npm install -g @vue/[email protected]

查看版本：vue -V

二、创建项目

1、基于交互式命令行的方式（vue create projectname）

在命令行中输入以下命令创建vue项目：vue create projectname

选择Manually select features进行手动定义，选择Babel，Router，Linter
利用空格键选中

选择路由模式：n

选择eslint模式：ESlint+Standard config

选择lint on save：

选择默认的第一个：

是否保存为一个预设，根据自己的情况选择：

所有的自定义配置完成之后，回车，等待创建项目，成功之后会提示进入项目目录，并运行项目：

进入项目目录：cd projectname

启动服务：npm run serve

在浏览器中打开上述地址，如果得到如下图，说明项目创建成功。

2、基于图形化界面的方式（vue ui）

在命令行输入vue ui，会在浏览器中自动弹出如下图所示的界面，根据提示一步一步创建即可，所有的配置和命令行方式一样。

三、初始项目目录解读

1、初始vue项目的结构分析

node_modules 依赖包目录。npm 加载的项目所需要的各种依赖模块

public 静态资源目录。如图片、字体等

​ index.html 一般只定义一个空的根节点

src 组件源码目录

​ assets 项目资源。 放置一些样式、图片等

​ components 各种vue组件。一个vue页面通常由三部分组成:模板(template)、js(script)、样式(style)

​ views相关的视图组件。

​ App.vue项目入口组件（根组件）。主要作用就是将我们自己定义的组件通过它与页面建立联系进行渲染，还 可以配置一些全局变量。

​ main.js 项目的核心文件（整个项目的入口js）。引入vue框架，根组件及路由设置、默认页面样式等，并且定义vue实例。

router.js路由的相关配置

.eslintrc.js Eslint语法相关的配置文件

.gitignore git上传需要忽略文件的配置

babel.config.js 对babel的配置文件（babel是一个js的编辑器，可以将ES6的格式转化为ES5)

package.json 项目的包管理配置文件。配置项目中用到的一些依赖库和调试的命令等。修改依赖之后，可通过npm install 安装这些依赖。

postcss.config.js 可以配置一些前缀

2、VUE脚手架的自定义配置

2.1 通过package.json配置项目

例如在package.json文件的底部加入如下代码：

"vue":{
    "devServer":{
        "port": "8888",
        "open": true
    }
}

2.2 通过单独的配置文件配置项目

1. 在项目的根目录下新建vue.config.js

2. 在该文件中进行相关的配置，从而覆盖默认配置

   module.exports={
       devServe:{
           port:8888,
           open:true
       }
   }
   

四、vue项目中使用echarts

1、cnpm install echarts（下载的是最新版本）

2、在main.js中全局引入

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

遇到的问题："export ‘default’ (imported as ‘echarts’) was not found in ‘echarts’

原因：版本问题

解决方法：

​ 方法一：降版本

​ 卸载最新版本：npm uninstall echarts

​ 重新安装4.9.0版本：npm install [email protected]

​ 方法二：更换导入方式

import * as echarts from 'echarts'