vue-cli工程化项目开发

vue-cli工程化项目开发

作者:严孝孝

目录

1.vue-cli是什么,作用是?
2.vue-cli环境搭建
3.多个界面的创建和显示
4.组件的使用
5.网络请求

课程内容

1.vue-cli是什么,作用是?

q.vue-cli是什么?

	vue-cli是一个工具, 是vue命令行中工具,能创建集成了很多技术的模板,
	在这个基础上提供了其他的功能,例如测试,开发部署,es6转es5,......

q.vue-cli的版本

	vue-cli 2  现在项目中使用
	vue-cli 3  以后常用工具

2.vue-cli环境搭建

q.如何搭建这个环境?

	Step1: 安装vue-cli工具
		cnpm install -g vue-cli
		
		测试: vue -V
		
	Step2: 创建项目
		vue init webpack my-project

		说明: init是模板名
			simple vue单文件模板
			webpack-simple 模板
			webpack 模板(全功能)
			
		说明:
			ESLint ESLint 是一个代码规范和错误检查工具
			unit tests 单元测试
			e2e test 测试技术
			
			Yarn是和npm类似的工具,好处是把下载做一个缓存
			
			最后让我们选择用哪个工具下载依赖, 不选择
			
	Step3: 安装依赖
		cd hello
		cnpm install
		
	Step4: 开发模式启动项目
		npm run dev

q.各个文件或目录的作用

	package.json     node项目的配置文件
		scripts选项		可以使用的命令
		dependencies 	依赖的库
		devDependencies 开发的时候依赖
		
		注意: 添加一个npm的库到项目
		cnpm install 库名 --save
		cnpm install 库名 --save-dev
	
	index.html  单文件项目中文件
		说明: 编译后的会自动插入到这个文件
		
	src目录 放源代码的目录
	
	static目录 放静态资源文件
	
	config目录 程序的配置
	
	build目录 存放组件脚本

q.src的结构

	src/index.js 程序的入口
		说明: 创建了一个vue实例,
			依赖 App.vue
			依赖 router
	src/App.vue
		说明: 核心代码 router-view
		
	src/router/index.js
		说明: 这个是整个程序的路由文件
		
	src/components  放所有界面,放所有组件

3.多个界面的创建和显示

案例: dou项目

q.如何显示多个界面

	Step1.创建book界面
		复制Helloworld.vue
		删除不要的内容
		创建book,music,film
		
	Step2.router/index.js导入组件
		import Book from '@/components/Book'
	
	Step3.设置每个界面路由
		添加  /
		添加 /book
		添加 /music
		添加 /film
	
		说明: 默认会显示 /book
		
	Step4.修改App.vue
		去除默认图片
		去除 #app 添加样式
		
		添加tabbar router-link   

	Step5.添加样式,改善显示效果

4.组件的使用

q.如何使用组件

	Step1: 创建一个vue文件,在components中
		在template中写html
		在style中css
		在script中写js逻辑
		
		说明: export default {}
			表示导出一个对象
			
	Step2: 在book,music,film用,先导入这个组件

	Step3: 界面添加属性 components,设置使用的组件

	Step4: 使用组件

5.网络请求

q.如何在vue-cil中使用axios

step1:使用npm 下载axios
        cnpm install axios --save
step2:在main.js 中
          import from axios 'axios'
          vue.prototype.$http=axios
step3:在任何组件的js中
        this.$http.get(url).then(function(res){
        
        })
        
 案例: dou项目