Vue安装与简易测试

安装Vue

1. nodejs的下载路径：https://nodejs.org/en/download/

2. node -v 和npm -v 检查是否安装成功

3. 安装镜像

    npm i -g cnpm --registry=https://registry.npm.taobao.org
   

4. 安装镜像Vue的脚手架

   cnpm i -g vue-cli
   

搭建Vue项目

初始化项目

1. npm init @vitejs/app
   

   

2. 填写工程名

3. 选择框架 framework

4. 选择语言

5.   cd 项目名
     npm install ：简写npm i 安装依赖
     npm run dev ：运行工程
   

6. 搭建完毕

   

7. Ctrl+C 停止CMD命令

   

其他命令

1. 查看已经安装的依赖

   1. npm list ：查看全部
   2. npm list 依赖名字(axios ， vue等) ： 查看指定
   
   3. npm list 依赖名(vue) -g : 查看全局依赖是否安装
   

2. 安装依赖

   1.npm insetall 本地安装所有依赖（package.json文件夹中）
   
   2.npm i 依赖名(vue) -g 全局安装（vue）依赖
   
   3. npm i 依赖名 -D ：开发阶段所需要的依赖 devDependencies
   
   4. 简写：npm i 依赖名 -S
      全写：npm i 依赖名 --save
       ：所有阶段所需要的依赖 dependencies
   

3. 项目中独立安装的依赖都使用 npm i 依赖名 -S

4. 查看中央仓库依赖的所有信息

   1. npm view 依赖名(element-plus) : 全部版本
   2. npm view 依赖名@next : 指定版本
   

5. 卸载依赖

   1. npm uninstall ： 卸载所有依赖
   2. npm uninstall 依赖名 ： 卸载指定依赖
   

6. 初始化工程

   1. npm init @vitejs/app 工程名 -template vue
   2. npm init @vitejs/app
   3. npm run dev : 启动
   

更多命令

node.js api文档

Vue简易操作与测试

• 导入 ：

  import 组件名 from "./components/组件名";
  

• 导出：

  export default {
    components: {自定义组件名}
  }
  

下载依赖：

npm i vue-router@next -S

npm i axios -S

npm i vue-axios - S

安装依赖：

app.use()

检查案axios是否正常

<template>
  <fieldset>
    <legend>后台获取数据{{depts.length}}</legend>
  </fieldset>
</template>

<script>
export default {
  name: "springbootVue",
  data(){
    return{
      depts:[]
    }
  },
  methods:{
    loadDate(){
      console.log("axios对象",this.axios)
          // this.axios.get("后台springboot地址").then(res =>{
      //   this.depts = res.data
      // })
    }
  },
  // 钩子函数
  created() {
    this.loadDate();
  }
}
</script>

<style scoped>

</style>

前台控制台打印信息