Vue-cli搭建项目
目录
一.介绍Vue-cli
二.Vue-cli搭建
1.需要的环境(Node.js)
2.npm
3.配置Node.js环境
4.创建Vue-cli项目
5.设置目录
6.配置组件路由
7.在main.js中配置路由
8.在App.vue中配置路由显示
9.检查是否搭建成功
三.总结
1.对应每一个目录的作用:
2.文件之间的关系
一.介绍Vue-cli
vue-cli是官方提供的一个脚手架，用于快速生成一个vue的项目模板；预先定义好的目录结构以及基础代码，就好比在创建Maven项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架，让我们的开发更加快速。
二.Vue-cli搭建
1.需要的环境(Node.js)
简单的来说Node.js是一个前端js运行环境或者说是一个JS语言解释器
现在前端都采用单页结构,一个项目中只有一个html文件,其他的内容都写在vue文件中,每个vue文件就是一个组件,我们会为每个组件配置一个访问地址(路由),通过地址访问组件,在唯一的html文件中切换不同的组件,这样我们只需要配置一次框架,依赖(jar包)也只需要导入一次
2.npm
npm是Node.js的包管理工具,用来安装各种Node.js的扩展.npm是JavaScript的包管理工具
3.配置Node.js环境
去官网直接下载安装即可Node.js 中文网
测试是否安装成功,win+r输入cmd打开终端:
输入:npm -v 查看npm版本
输入:node -v查看node版本
4.创建Vue-cli项目
创建时需要等待一会资源下载,博主这里使用的vue2所以创建的是(2.6.10)版本
5.设置目录
刚创建好的项目,目录如下:
Alt+c打开终端,输入npm run serve测试是否创建成功,创建成功页面如下:
删除默认的components文件夹,在src下创建文件views,在views文件下创建login.vue文件,这里的login.vue文件实际上就是我们的组件
6.配置组件路由
vue router是Vue.js官方的路由管理器.它和Vue.js的核心深度集成
vue-router是一个插件包,所以我们还是需要用npm来进行安装,打开命令行,输入:
package.json:配置项目中要用到的组件地址,例如网络请求,路由,element UI
配置路由:
import Vue from 'vue';/* 导入Vue */
import router from 'vue-router'; /* 导入路由 */// 导入我们自己创建的组件
import Login from "../views/Login.vue"Vue.use(router);
/* 定义组件路由 创建vue-router对象*/
let rout = new router({routes: [{path: '/',//默认地址,自动访问指定组件component: Login//指定组件},{path: '/login',//为组件定义访问地址component: Login//指定组件},]});
//导出路由对象
export default rout;7.在main.js中配置路由
import Vue from 'vue'//导入vue.js
import App from './App.vue'//导入默认组件//导入路由组件
import router from './router/index.js'
Vue.use(router);Vue.config.productionTip = false// 创建一个唯一的Vue对象
new Vue({render: h => h(App),//项目启动时默认打开App.vue组件router,
}).$mount('#app')//类似于el: 与标签挂载8.在App.vue中配置路由显示
<template><div id="app"><router-view></router-view></div>
</template><script>export default {name: 'app',}
</script><style></style>
<router-view></router-view>标签的作用是显示组件
9.检查是否搭建成功
在终端输入npm run serve,访问地址,在地址后添加login
(在login.vue文件中添加hello login)
<template><div>hello login</div>
</template>如果页面打开和我的一样,就是搭建成功了
三.总结
1.对应每一个目录的作用:
node_modules:存放项目中需要用到的依赖,也有些用不到
public:(index.html)唯一的html文件,确保单页结构
src:写的代码都在src文件中
assert:存放静态资源(图片,css文件等)
components:存放可复用vue组件的地方
App.vue:根组件,整个应用的布局容器
main.js:应用入口文件,创建Vue根实例,全局注册组件
package.json:配置项目中要用到的组件地址,例如网络请求,路由,element UI
router:路由配置目录
views:页面级组件目录
2.文件之间的关系
