Vue的安装及项目结构解读

简单项目

• 开发环境版本：
• 生产环境版本：

然后就可以开始一个简单的Vue项目开发。

大型项目

• 前提是你已经安装过了node.js 和 cnpm 。使用npm命令和cnpm命令都是可以的，但cnpm 可以更快速的创建项目，npm安装的比较慢，而且很可能会因为网络问题而出错，所以使用cnpm稳一点。下面是cnpm的全局安装。

npm install cnpm -g --registry=https://registry.npm.taobao.org

• vue-cli 是一个官方发布 vue.js项目脚手架，使用 vue-cli可以快速创建vue项目，全局安装。

//全局安装脚手架
cnpm install -g vue-cli

• 开始一个Vue项目。

vue init webpack xxx(项目名字)
//或者
vue init webpack
//如果在命令行没有写项目名称，可以 cd 进入想要放置的文件夹，再运行上面的 vue init webpack 就可以了。

• 启动项目，完成。

npm run dev

结构解读

• src目录，因为大部分的内容都是围绕这个目录进行的。工作目录。
• build目录，webpack配置。
• config是配置目录，包括端口号等
• node_modules是项目依赖模块
• static是静态资源文件
• package.json是整个项目配置文件
• .babelrc 。 babel 配置文件,把es6及更高级的编译成es5。
• .editorconfig 。编辑配置文件,帮助开发人员在不同的编辑器和IDE中定义和维护一致的编码风格。
• .gitignore 。用来过滤一些版本控制的文件，比如node_modules文件夹。
• index.html 一个总的入口文件

src目录结构

• assets为一些资源文件的目录
• components是基础的组件,放一些公共的模块
• views 一些视图模块，但不是公共的，可以是单个的，只用一次的。
• router可以设置路由，即完成单页面切换的效果
• app.vue 是一个主体的入口，一切从这里开始
• main.js 属性其他语言开发的同学会知道，每个程序都有一个主入口，main可以配置一些核心文件和信息

vue加载页面过程

• 浏览器访问项目，最先访问的是index.html文件。
• 在index.html中,上面有一个id为app的挂载点。
• 在main.js中，初始化一个Vue实例，在Vue实例中，通过 new Vue({ el: '#app',})告诉该实例要挂载的地方；（即实例装载到index.html中的位置)
• 接着，实例中注册了一个局部组件App，这个局部组件App来自于哪儿呢？import App from './App.vue'。
• app.vue 是个根组件。在App.vue里