vue脚手架

安装vue脚手架

npm i @vue/cli -g 全局安装脚手架

创建vue项目

C:\>vue create yourvue（创建 名为yourvue的vue项目）
Vue CLI v5.0.8
? Please pick a preset: Default ([Vue 2] babel, eslint)（选择vue2版本的）
Vue CLI v5.0.8
✨  Creating project in C:\yourvue.
⚙️  Installing CLI plugins. This might take a while...
added 848 packages in 21s
🚀  Invoking generators...
📦  Installing additional dependencies...
added 85 packages in 4s
⚓  Running completion hooks...
📄  Generating README.md...
🎉  Successfully created project yourvue.
👉  Get started with the following commands:
 $ cd yourvue（进入到yourvue文件夹中）
 $ npm run serve（运行创建的vue项目）
C:\>

上面出现的小图画可忽略不计

项目目录结构

以myvue项目为例
myvue有以下目录
node_modules 插件安装目录
public 共用文件和模板目录
src 源文件目录
.gitignore 上传到服务器忽略配置
babel.config.js es6 转换成es5配置
jsconfig.json js配置
package.json 包管理（项目管理目录）
package-lock.json 插件安装地址缓存
readme.md 项目说明文件
vue.config.js vue项目配置文件

src 项目的源文件
–assets 资源目录
–logo.png logo
–components 存储自定义组件目录
–helloWorld.vue 默认组件
–app.vue vue根组件
–main.js 项目入口文件

.vue文件

具体内容如以下所示

		<template>
	<div>
		1.在脚手架里面.vue 是一个文件也是一个组件
		2. .vue 由三个部分组成 template script ,style
		3.template 视图显示部分只能有一个子节点
		4.script 业务逻辑存储数据
		5.script 中data 用函数的形式返回一个对象
		6.vue 的指令连接了script 和 template
		<p class="green">7. style展示样式</p>
		<p>8.使用scoped 实现样式隔离（style中的样式只在当前组件启用）</p>
		<p>{{msg}}</p>
		<input type="text" v-model="msg">
	</div>
</template>
<script>
	export default{
		data(){
			return{
				msg:"vue-脚手架写大项目"
			}
		}
	}
	//export 导出defaule 默认data数据
	//data(){}是data:function(){}的简写
	//scoped 作用域
	
</script>
<style scoped="scoped">
/*这种写法也是可以的 <style scoped> */
	.green{
		background-color: green;
		color: aliceblue;
	}
</style>