目录
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>