vue 学习

前端项目初始化

9.新建分支提交代码及分支合并

新建login分支

git status
git checkout -b login
git branch

login分支合并master

git branch
git checkout master
git branch
git merge login
git push

8.引入echarts

安装依赖

<template>
  <div class="login">
    
    <div id="main" style="width: 600px;height: 400px;"></div>
  </div>
</template>
<script>
  import * as echarts from 'echarts';
  //import echarts from 'echarts'
  // @ is an alias to /src
  //import HelloWorld from '@/components/HelloWorld.vue'
  export default {
    name: 'Login',
    components: {

    },
    mounted() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);

    }
  }
</script>

报错及解决：
引入echars5.0报错“export ‘default‘ (imported as ‘echarts‘) was not found in ‘echarts‘

7.可视化运行

6.git命令

git status

git checkout -b login

查看分支

git branch

5.安装依赖-less

less-loader

less

4.安装依赖-axios

axios

安装成功

3.安装插件-Element-UI

vue-cli-plugin-element

2.通过vue脚手架创建项目

2.1 可视化

vue ui

选择桌面的code文件夹

稍等一会，就会显示成功，如下：

1.安装vue脚手架（只需安装一次）

1.1 查看node版本-没有就安装

node -v

下载node地址

1.2 查看npm版本-没有就安装

npm -v

1.3 配置下载源

1.3.1 全局安装nrm

npm install nrm -g

1.3.2 查看镜像源

nrm ls

若执行报错请看1.3.4错误处理

1.3.3 使用淘宝镜像源

nrm use taobao

1.3.4 错误处理

错误：

internal/validators.js:125
    throw new ERR_INVALID_ARG_TYPE(name, 'string', value);
    ^

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined
  at validateString (internal/validators.js:125:11)
  at Object.join (path.js:427:7)
  at Object.<anonymous> (D:\Program Files\nodejs\node_modules\nrm\cli.js:17:20)
  at Module._compile (internal/modules/cjs/loader.js:701:30)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
  at Module.load (internal/modules/cjs/loader.js:600:32)
  at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
  at Function.Module._load (internal/modules/cjs/loader.js:531:3)
  at Function.Module.runMain (internal/modules/cjs/loader.js:754:12)
  at startup (internal/bootstrap/node.js:283:19)
  at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)

按照错误提示，打开js文件

D:\Program Files\nodejs\node_modules\nrm\cli.js

修改为：

const NRMRC = path.join(process.env[(process.platform == 'win32') ? 'USERPROFILE' : 'HOME'], '.nrmrc');

重新执行即可

1.4 安装vue脚手架

npm i @vue/cli -g

更新（vue ui命令没反应，需要更新）

cnpm i -g @vue/cli

1.5 测试安装是否成功

vue -V

查看当前版本可以使用的命令

vue -h

参考

安装vue脚手架
nrm报错internal/validators.js:124 throw new ERR_INVALID_ARG_TYPE(name, ‘string‘, value)；
nrm报错internal/validators.js:124