vue-cli搭建

目录

vue-cli搭建项目

主要的功能

需要的环境 

Node.js

npm

使用 HbuilderX 快速搭建一个 vue-cli 项目

1.先创建一个vue项目

2.检验是否创建成功

3.组件路由

安装

 1.在src文件夹下创建router目录,创建index.js

2.在APpp.vue中添加路由视图

3.在main.js 中配置路由

4.其他组件

模板

---

vue-cli搭建项目

vue-cli 官方提供的一个脚手架，用于快速生成一个 vue 的项目模板；预先定义 好的目录结构及基础代码，就好比咱们在创建 Maven 项目时可以选择创建一个 骨架项目，这个骨架项目就是脚手架，我们的开发更加的快速

主要的功能

•  统一的目录结构 
• 本地调试 
• 热部署 
• 单元测试 
• 集成打包上线

需要的环境 

Node.js

简单的说 Node.js 是一个前端 js 运行环境或者说是一个 JS 语言解释。

npm

npm 是 Node.js 的包管理工具，用来安装各种 Node.js 的扩展。npm 是 JavaScript 的包管理工具，也是世界上最大的软件注册表。有超过 60 万个 JavaScript 代码包可供下载。npm 让 JavaScript 开发人员可以轻松地使用 其他开发人员共享的代码。

Node.js安装

安装地址

https://nodejs.org/en/download

 选择版本进行安装

使用 HbuilderX 快速搭建一个 vue-cli 项目

1.先创建一个vue项目

(注意版本2.6.10)

2.检验是否创建成功

1. 点击命令行窗口
2. 输入 npm run serve
3. 随意点击一个网页地址

 如果出现这个页面就代表创建成功

3.组件路由

创建前需要先删除

components文件夹和App.vue以及 package-lock.json文件

安装

vue-router 是一个插件包，所以我们还是需要用 npm 来进行安装的。 打开命令行工具，进入你的项目目录，输入下面命令。

npm i vue-router@3.5.3

 1.在src文件夹下创建router目录,创建index.js

/* 
为组件配置路由地址 
 */
import Vue from 'vue';
import router from 'vue-router'; /* 路由导入*/

/* 导入我们自己的组件地址*/
import Index from "../Index.vue";
import Login from "../Login.vue"
import Reg from "../Reg.vue"

/* 注册  定义组件访问地址 */
Vue.use((router));

/* 定义组件路由 */
var rout = new router({
	routes: [
		{
			path:"/",
			component:Index
		},
		{
			path: '/index',
			/* name: '/index', */
			component: Index
		},
		{
			path: '/login',
			component: Login
		},
		{
			path: '/reg',
			component: Reg
		}
	]
});

/* 导出路由对象 */
export default rout;

2.在APpp.vue中添加路由视图

<template>
	<!-- // router-view 用来显示不同的组件 -->
  <div>
	  <router-view></router-view>
  </div>
</template>

<script>
	
</script>

<style>
</style>

3.在main.js 中配置路由

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

/* //导入组件路由 */
import router from './router/index.js'
Vue.use(router);
new Vue({
el: '#app',
router,
render: h => h(App)
})

4.其他组件

//Login.vue

<template>
	<div>
		登录
	</div>
</template>

<script>
	export default {
		/* //组件中的数据在data中定义 */
		data() {
			return {
				mum: 0
			}
		},
		methods: {

		},
		mounted(){
			
		}
	}
</script>

<style>
</style>

//Reg.vue
<template>
	<div>
		注册
	</div>
</template>

<script>
	export default {
		/* //组件中的数据在data中定义 */
		data() {
			return {
				mum: 0
			}
		},
		methods: {
	
		},
		mounted(){
			
		}
	}
</script>

<style>
</style>

模板

1. 创建 router 目录
创建 index.js 文件,在其中配置路由

import Vue from 'vue';
import router from 'vue-router'; /* 导入路由 */
import login from '../views/login'; /* 导入其他组件 */
import content from '../components/content'; /* 导入其他组件 */
Vue.use(router)

/* 定义组件路由 */
var rout = new router({
routes: [
{
path: '/index',
name: 'index',
component: index
},
{
path: '/content',
component: content
}
]
});


//导出路由对象
export default rout;


2.使用路由
<router-link to="/index">首页</router-link>
<router-link to="/content">内容</router-link>
<router-view/>


3.在 main.js 中配置路由
import router from './router/index.js'
Vue.use(router);
new Vue({
el: '#app',
router,
render: h => h(App)
})