目录
一.前端项目结构的对比
1.传统的前端项目结构
一个项目中有许多html文件，每一个html文件都是相互独立的，如果需要在页面中导入一些外部依赖的组件(vue.js, css), 就需要在每一个html文件中都需要导入,非常麻烦，而且都需要我们去官网自己下载.
2.现在的前端项目结构
二.什么是 vue-cil
vue-cli 官方提供的一个脚手架，用于快速生成一个 vue 的项目模板；预先定义好的目录结构及基础代码，就好比咱们在创建 Maven 项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架，我们的开发更加的快速；三.主要的功能
1. 统一的目录结构 2. 本地调试 3. 热部署 4. 单元测试 5. 集成打包上线四.需要的环境（前提）
1.Node.js
简单的说 Node.js 是一个前端 js 运行环境或者说是一个 JS 语言解释器。 官网地址： https://nodejs.org/en/download 下载完成后，在控制台输入以下命令测试是否安装成功，若一致，则成功了
2.npm
npm 是 Node.js 的包管理工具，用来安装各种 Node.js 的扩展。npm 是JavaScript 的包管理工具，也是世界上最大的软件注册表。有超过 60 万个JavaScript 代码包可供下载。npm 让 JavaScript 开发人员可以轻松地使用其他开发人员共享的代码。3.使用 HbuilderX 快速搭建
• 项目目录解读：
运行：在控制台输入：npm run serve
五.常用命令
• 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 i vue-router@3.5.3若输入后，运行不成功，可以输入：
npm config set registry https://mirrors.huaweicloud.com/repository/npm/
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')
本篇文章讲述了开发环境的安装以及如何使用vue脚手架搭建前端项目，希望对大家有所帮助，若文章有错误的地方，欢迎大家指出，一起探讨学习，今天的分享就到这里，别忘了给小博主一键三连，你的鼓励就是我的动力，不见不散。
标签：npm,10,vue,项目,cil,Vue,组件,router,js From： https://blog.csdn.net/2303_77640525/article/details/141530511