【Vue】脚手架的介绍和搭建

Vue脚手架的介绍和搭建

	脚手架 vue-cli

			（1）安装脚手架（npm版本3.0以上，查看npm版本：npm -v）
					npm install -g@vue/cli （全局安装）


			（2）通过脚手架搭建项目
					vue create 项目名（项目名使用小写英文）

					Vue CLI v5.0.8
					? Please pick a preset:
							> Manually select features
					? Check the features needed for your project:
							>(*) Babel  ---转码器
							 (*) Router
							 (*) Vuex
					? Choose a version of Vue.js that you want to start the project with
							 > 2.x
					? Use history mode for router? (Requires proper server setup for index fallback in production)
							 No
					? Where do you prefer placing config for Babel, ESLint, etc.?
							 > In package.json
					? Save this as a preset for future projects?
							 No

					等待安装完成......即可


			（3）项目
					启动：npm run serve（项目启动必须到项目根目录下）
					终止：Ctrl + c


			（4）项目结构：
					node_modules：项目依赖包
					public：静态文件
							index.html：单页面开发的入口文件，通常不会动它（但是会将src中的组件挂载到它的#app节点中）
					src：项目开发源码
							assets：放资源的文件
							components：小组件，公共组件
							views：放页面级组件
							router：配置路由
							store：状态管理（公共数据）

							App.vue：所有vue页面的主入口（app.vue中的内容最终会被挂载到index.html的div#app中）
							main.js：src文件夹的入口文件

					package.json：项目构建所依赖的包



	Vue中的导出：export default   引入：import


	查看搭建的vue的版本号：vue-version 或 vue-V


	Vue实例化对象代理了data里面的所有属性（除了_和$开头的属性）

自定义功能配置包括以下功能：

Babel    -------  语法编译（es6 转 es5）（建议安装）
TypeScript   ------  一种给 JavaScript 添加特性的语言扩展 （详情见文档）
Progressive Web App (PWA) Support   ------  网页渐进 APP
Router   --------  路由（建议安装）
Vuex   --------   数据中心  （根据需要安装）
CSS Pre-processors   -------  css 预处理 预处理语言 （sass or  less ）（建议安装）
Linter / Formatter   -------  语法检查
Unit Testing   -------  单元测试
E2E Testing   -------  集成测试
  
（通过上下键移动光标进行选择，通过空格键选择是否安装回车可以直接进入下一步）

选择好配置后等待搭建安装完成后；通过cd myvue到项目根目录下，通过npm run serve启动vue项目

刚创建好的vue项目，文件结构

页面入口