目录
一.前端项目结构的对比
1.传统的前端项目结构
一个项目中有许多html文件,每一个html文件都是相互独立的,如果需要在页面中导入一些外部依赖的组件(vue.js, css), 就需要在每一个html文件中都需要导入,非常麻烦,而且都需要我们去官网自己下载.
2.现在的前端项目结构
二.什么是 vue-cil
三.主要的功能
四.需要的环境(前提)
1.Node.js
2.npm
3.使用 HbuilderX 快速搭建
• 项目目录解读:
五.常用命令
• npm run serve
该命令用来运行项目,在创建项目中有演示.
• Ctrl + C
在终端Ctrl+C,选择是否结束运行项目
• npm install
下载并安装项目依赖,即node_modules 。由于项目的大小90%都是项目依赖所占用,所以通常在给别人发送我们的代码时不用发送node_modules文件夹,对方在接收后通过在终端输入npm install命令进行手动下载项目依赖。
在下载之前需要先删除 package-lock.json 文件
如果package-lock.json 文件删除后仍然出现,可以在终端输入命令:
npm config set package-lock false
• npm run build
用来打包项目,生成一个dist文件夹 ,类似于maven的打包功能。
六.创建项目的需要
1.创建组件
1)创建组件的基本模板
<template>
<div>
</div>
</template>
<script>
//导出组件
export default{
data(){
return{
}
},
methods:{
}
}
</script>
<style>
//css样式
</style>
2) 删除components文件夹,在src文件夹中新建vue文件
3)新建index.js文件
·在终端下载router组件
若输入后,运行不成功,可以输入:
npm config set registry https://mirrors.huaweicloud.com/repository/npm/
![](https://i-blog.csdnimg.cn/direct/c8ff716680654078bc6680d6bb80a553.png)
2.组件路由
在index.js中配置路由
这里创建了三个vue组件,分别是Index.vue、Login.vue、Reg.vue。要实现组件路由需要先在index.js中导入这三个组件,并为其定义一个访问地址,其通常由path和component两个部分组成,path用来定义component所绑定的组件地址。component后的组件名必须和import后的名字对应相同。
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',
component: Index
},
{
path: '/login',
component: Login
},
{
path: '/reg',
component: Reg
}
]
});
//导出路由对象
export default rout;
这里默认首次启动项目访问的是Index.vue组件,所以在Index.vue组件中使用<router-link>组件来创建Reg.vue和Login.vue组件的导航链接
在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({
render: h => h(App),
router,
}).$mount('#app')
![](https://i-blog.csdnimg.cn/direct/bebf38ec7d2849aea0b43a3cab5e08cb.png)
本篇文章讲述了开发环境的安装以及如何使用vue脚手架搭建前端项目,希望对大家有所帮助,若文章有错误的地方,欢迎大家指出,一起探讨学习,今天的分享就到这里,别忘了给小博主一键三连,你的鼓励就是我的动力,不见不散。