Vue入门总结

技术栈：VUE；Vue-router；Vue-resource；Vue-cli；

项目：个人博客vue重构

一、vue-cli脚手架搭建项目结构

全局安装vue-cli：

npm install vue-cli -g

初始化vue-cli项目：

vue init <模板名称> <项目名称>

安装项目依赖：（网络慢的话可以使用淘宝镜像cnpm）

npm install 

 

二、项目流程　

　　在src的 components下放置vue模板

　   app.vue为入口模板文件

　　main.js为vue根实例入口

 

页面中导入模板：

import  模板名称 from ‘模板路径’

main.js入口文件一般内容:

import 导入所需模块，例如vue-router，vue-resource等中间件，并且使用Vue.use()使用；

定义路由，也可以将路由部分抽离成一个独立的文件引入；

new vue（{}）挂在vue实例在DOM上，并且将对应的路由文件引入；