Vue-cli搭建项目-CSDN博客

本文链接：https://blog.csdn.net/Vaclee/article/details/148072468

一.介绍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来进行安装,打开命令行,输入:

npm i vue-router@3.5.3,下载组件路由插件

package.json:配置项目中要用到的组件地址,例如网络请求,路由,element UI

下载成功后我们可以在package.json文件中的dependenceies中看到vue-router,然后在src下面创建router文件夹,在router文件夹下创建index.js文件用于我们配置组件路由

配置路由:

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:页面级组件目录