Vue脚手架

01.vue-cil创建基本项目结构

• npm install vue-cli -g 全局安装vue-cil
• 验证是否安装成功 vue --version
• 生成项目模板 vue init 模板名 项目目录名称
• • simple 基本没用
• • webpack 可以使用(大型项目)Eslint 检查代码规范，单元测试
• • webpack-simple 个人推荐使用, 没有代码检查 √
• 进入到项目目录里面下载包 cd 项目目录 npm i
• (下载完包)运行文件 npm run dev

模板选择webpack-simple，项目目录是demo


初始项目结构

运行预览文件

02.项目文件

• 一般项目不包含node_modules包文件 可以自己执行cnpm/npm i自动生成;
• node_modules文件夹放置的是各种包文件
• src文件夹用来书写自己内容(各种组件、images、css)
• assets配置静态资源 images css
• components自己新建的，一般用来放置自己的组件
• babelrc配置插件
• editorconfig一般不用自己设置
• gitignore上传git的时候配置信息。所有出现在该文件内部的文件，都不会被上传
• index.html唯一的一个html，后期所有组件内容都会渲染到该文件内部
• packge.json放置各种依赖包
• webpack.config.js实现打包。各种css/js/vue打包为js
• main.js主入口书写一些配置信息(路由配置、数据配置)

.vue文件

• 每一个.vue文件，都是一个组件
• App.vue相当于之前实例化的new Vue对应的html 也就是主组件
• .vue相当于组件 具体结构如下

<template><!--放置模板 只能有一个根目录--></template>

<script>
	//书写组件相关的js
	export default {
		data(){
			return {

			}
		},
		methods:{

		}
	}
</script>

<style>
	/*书写css 书写的css是全局*/
</style>

<style scoped>
  /*如果有一些css,需要只针对当前的vue文件有效 加scoped属性*/
</style>

03.运行代码测试

下载路由的包 npm i vue-router -S

创建组件文件，再写好组件

组件(其一)

定义路由

主组件(App.vue)丢占位符(注释的是vue自带代码)

主入口(main.js)配置路由

运行效果

2021.02.04 23：42