webpack与vue-cli

webpak准备工作:

cnpm install webpack

webpack-dev-server

vue-loader

vue-html-loader

css-loader

vue-style-loader

vue-hot-reload-api

babel-loader

babel-core

babel-plugin-transform-runtime

babel-preset-es2015

babel-runtime

webpack+vue-loader

webpack加载模块

1. npm install 或者 cnpm install

2. npm run dev

-> package.json

“scripts”:{

“dev”:”webpack-dev-server –inline –hot –port 8080”

}

以后下载模块：

npm install –save-dev

报EADDRINUSE这个错的意思是 端口被占用

路由:

vue-router

配合vue-loader使用:

1. 下载vue-router模块

cnpm install vue-router

2. import VueRouter from ‘vue-router’

3. Vue.use(VueRouter);

4. 配置路由

var router=new VueRouter();

router.map({

路由规则

})

5. 开启

router.start(App,’#app’);

注意:
之前: index.html  ->   <app></app>
现在: index.html  ->   <div id="app"></div>
App.vue ->   需要一个 <div id="app"></div>  根元素

代码压缩、上线用

npm run build

-> package.json

“scripts”:{

“dev”:”webpack -p”

}

脚手架:

vue-cli——vue脚手架

帮你提供好基本项目结构

本身集成很多项目模板:

simple 个人觉得一点用都没有

webpack 可以使用(大型项目)

Eslint 检查代码规范，

单元测试

webpack-simple 没有代码检查

基本使用流程:

1. npm install vue-cli -g 安装 vue命令环境

验证安装ok?

vue –version

2. 生成项目模板

vue init <模板名> 本地文件夹名称

3. 进入到生成目录里面

cd xxx

npm install

4. npm run dev