目录

1 Vue

2.安装Nodejs服务器

2.1 安装npm

2.2 安装vue的脚手架

3. 使用脚手架创建Vue工程

4. webstorm打开vue工程

5 main.js

 6 路由

1 Vue

但是我们之前的vue和我们的java代码是不是都在一个工程下。没有做到前后端完成分离。企业中前端也会由自己的服务器，也有自己的开发工具。

前端服务器Nodejs 开发工具VsCode[我们为了和idea匹配使用WebStorm].

2.安装Nodejs服务器

步骤省略---[注意:不要安装到中文目录下]

验证是否安装完成:

2.1 安装npm

因为前端项目也需要依赖一些插件:比如:axios elementui 那么我们可以使用npm下载并安装到当前项目。

我们无需安装因为在nodejs中默认带了该软件

2.2 安装vue的脚手架

脚手架的作用:就是用来帮你创建前端vue工程。

安装的命令: npm install -g @vue/cli

速度很慢

3. 使用脚手架创建Vue工程

(1)在cmd窗口中输入

 （2）创建

（3） 创建完成后

 （4）安装需要的插件和依赖

 （5）安装axios发送异步请求的依赖

4. webstorm打开vue工程

关联:npm命令

整个项目中node_modules占用项目的空间99%。 以后拿到的项目一定没有node_modules。需要自己在本地安装。

npm install  -- 安装项目需要的模块

npm run serve  --运行项目 nodejs

5 main.js

一个组件引用另一个组件:

当前组件中导入另一个组件

import hello from './components/Hello.vue'

注册另一个组件

export default {
name: 'app',
//(2)注册组件
components: {
  hello
}
}

使用注册的组件

<!--(3)使用组件-->
<hello></hello>

父组件如何向子组件传值

 6 路由

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  // {
  //   path: '/',
  //   name: 'home',
  //   component: HomeView
  // },
  // {
  //   path: '/about',
  //   name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
  //  component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
 // }


  {
    path: '/home',
    name: 'Home',
    component: Home
  },
  {
    path: '/user',
    name: 'User',
    component: () => import(/* webpackChunkName: "about" */ '../views/User.vue')
   }
]

const router = new VueRouter({
  routes
})

export default router

App.vue

<template>
  <div id="app">
<!--      <div>-->
<!--          <img src="./assets/1.jpg" width="200" height="300">-->
<!--      </div>-->
<!--    <img src="./assets/logo.png">-->
<!--    <div>-->
<!--      <p>-->
<!--        If Element is successfully added to this project, you'll see an-->
<!--        <code v-text="'<el-button>'"></code>-->
<!--        below-->
<!--      </p>-->
<!--      <el-button>el-button</el-button>-->
<!--    </div>-->
<!--    <HelloWorld msg="Welcome to Your Vue.js App"/>-->
      <Hello :msg="name"></Hello>
      <p>
      <router-link to="/home"><el-button type="primary">首页</el-button> </router-link>
      <router-link to="/user"><el-button type="primary">用户信息</el-button> </router-link>
      </p>
      <router-view/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import Hello from './components/Hello.vue'
export default {
  name: 'app',
  components: {
    HelloWorld,
    Hello
  },
  data(){
      return{
            "name":"张三"
        }
  }

}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 

//Home.vue
<template>
    <h1>
        首页内容
    </h1>
</template>

<script>
    export default {
        name: "Home.vue"
    }
</script>

<style scoped>

</style>

 //User.vue

<template>
    <h1>
        用户信息
    </h1>
</template>

<script>
    export default {
        name: "User.vue"
    }
</script>

<style scoped>

</style>