【vue笔记】1.vue结构分析--创建一个简单的vue工程来说明一下vue的基本框架

在控制台创建一个简单的vue工程：

在需要放置工程的目录下打开控制台，输入：

vue init webpack test

可以创建一个名为test的项目。然后会提示对项目的一些属性进行配置：

Project name	工程名，不能使用大写 一般直接enter
Project description	输入一句话描述这个工程
Author	作者
Vue build	打包方式 直接enter
Install vue-router	是否安装路由 选yes
Use ESLint to lint your code	ESLint是检查代码是否规范的东西，不要选！检查代码跟教导主任一样严格！ 选no
Set up unit tests	单选测试 选no
Setup e2e tests with Nightwatch?	端到端的测试框架NightWatch 选no
Shoulder we run npm installfor you after thr project has been created?(Recommend)	是否在工程创建后就去跑 npm 安装依赖 选择yes

创建完后显示的内容为：

创建完工程后，在目录文件下会出现创建好的vue工程：


有两种方式可以启动项目，第一种是在控制台中输入npm命令，另一种是在编译器中运行项目。
第一种：npm启动项目。在控制台中输入：

cd test
npm run dev

就可以启动项目了，控制台会显示：

在不关闭控制台的条件下在浏览器中输入：http://localhost:8080，显示为：

第二种，在webstorm中运行项目：
第一次运行项目要编辑一下运行配置：


+号位置加一个npm，然后配置：
Name：随便写
Command：run
Scripts：dev
配置完后运行项目，同样可以得到上面的页面。

Vue的基本框架：

整个工程的目录如下：

文件命名规范：

文件类型	文件说明
.vue文件	.vue文件全部大驼峰命名法，仅入口文件index.vue为小写
测试文件	全部以测试文件名.spec.js 命名
资源文件	全部小写字母字符命名，由2个以上的词组成，以“-”分割

不同文件夹的功能：

文件夹名	文件夹功能
src	包含所有的.vue文件
build	存放用于编译用的webpack配置与相关的辅助工具代码
config	三大环境配置文件，用于设定环境变量和必要的路径信息
test	测试文件
static	静态文件
dist	npm run build指令下生成的输出文件

vue的主要文件：

文件名	文件功能
main.js	通过import引入vue.js组件， 创建vue对象的实例
index.html	将vue的实例绑定到一个页面
App.vue	一个组件，表示一个vue组件

首先我们存在一个App.vue组件，App.vue中含有，路由匹配成功的页面都在这里进行渲染和切换，因此App.vue是我们的主组件。App.vue通过export default 导出组件的名称为App;
Main.js通过import App from './App’语句引入App组件，然后通过new Vue创建vue实例并初始化一些插件。main.js中的el将’#app’挂载到index.html中的

中。且用