详细记录vue项目实战步骤(含vue-cli脚手架)

一、通过vue-cli创建了一个demo。

（vue-cli是快速构建这个单页应用的脚手架，本身继承了多种项目模板：webpack（含eslit,unit）和webpack-simple(无eslint,unit)），这些模板都是基于webpack。

安装步骤如下：

1）安装vue-cli ，配置vue命令环境：运行cnpm install vue-cli -g

2）初始化项目，生成项目模板：运行

vue init webpack-simple vue-cli-demo

cd vue-cli-demo

cnpm install

npm run dev  运行后页面如下图

npm run build  //打包输出，上线

二、如何看懂一个vue项目

1）首先在webpack.config.js看到module.exports={}里面entry入口文件 是src/main.js 。output输出文件在build.js中

2）看main.js里面引入和很多需要的文件(有路由文件、axios文件、懒加载、等)

其中关于懒加载 可以看https://www.cnblogs.com/xyyt/p/7650539.html

3)看main.js里面引入的App.vue（这个里面有加载图片，路由文件，底部导航组件），而路由文件是在mian.js里面引入的，在App.vue里面引入总的。路由文件相关的组件引入是在router.config.js里，在找相关的组件。

三、在此项目的基础上修改为自己的项目

1)首先引入一些后台的文件。如xx.sql、server.js、route/index.js、libs/common.js等

2）