关于使用Vue-cli脚手架配合webpack-simple构建项目操作流程（自用）

1、

vue-cil

构建项目：官网的介绍

vue-cil

是

vue

的脚手架工具。其模板可以通过 vuejs-templates 来查看。我们不需要知道它究竟是什么，只需要知道它是一个工具帮助我们辅助开发，而我们所要做的就是安装上它，来方便我们的开发。下面，我们来用

vue-cil

构建一个项目。首先，我们在终端中把当前目录定位到你准备存放项目的地方。即自己定义的一个目录下面我们首先需要安装

vue-cil

。我们照着官网的命令行直接在命令端口输入命令就行，细节如下：（linux和window通用）

npm install -g vue-cli 或者官网的： $ npm install –global vue-cli

这个命令是全局安装

vue-cli

的意思，只需要运行一次就可以了。安装上之后，以后就不用安装了。2、在你需要的项目目录下执行以下代码：vue init webpack-simple vue-demo(vue-demo)为项目名称，使用webpack-simple更加轻便，少了很多单元测试等的繁琐流程3、下载路由cnpm install vue-router -D4、之后跑起来npm run dev5、打开项目文件夹(1)引入路由，在main.js里边添加两行"import VueRouter from 'vue-router'"    "Vue.use(VueRouter);"  (2)创建components文件夹里边放一些.vue模版比如Header,Home等等(3)配置路由，在src目录下新建一个router.config.js的文件,配置如下
再回到main.js添加如下代码
至此路由配置完成。6、使用animate.css动画把animate.css 文件放在assets/css下然后在main.js中添加
之后在组件中
画面就可以动起来了

阅读更多