简单的目录结构:
|-index.html
|-main.js 入口文件
|-App.vue vue文件（组件），官方推荐命名法（首字母大写）
|-components 组件存放的文件夹
|-package.json 工程文件(项目依赖、名称、配置)
npm init --yes 生成
|-webpack.config.js webpack配置文件
ES6: 模块化开发
导出模块：
export default {}
引入模块:
import 模块名 from 地址
--------------------------------------------
webpak准备工作:
cnpm install webpack --save-dev （不带服务器）
cnpm install webpack-dev-server --save-dev （带服务器）
App.vue -> 变成正常代码 vue-loader@8.5.4
cnpm install vue-loader@8.5.4 --save-dev
cnpm install vue-html-loader --save-dev
vue-html-loader、css-loader、vue-style-loader（行内的css样式）、
vue-hot-reload-api@1.3.2（组件内的js）
babel-loader
babel-core（核心语法）
babel-plugin-transform-runtime
babel-preset-es2015
babel-runtime
最最核心：
vue下载
生产依赖和开发依赖是通过下载的命名区分的 --save-dev（开发依赖）
--save（生产依赖）
最后发布上线时是运行build命令，将所有生产的文件及依赖打包压缩到build.js中
如何运行此项目
1.npm install 或者cnpm install 安装依赖
2.npm run dev 执行命令
->package.json
"scripts":{
"dev":"webpack-dev-server --inline --hot --port 8082"
}
路由配合vue-loader使用
1. 下载vue-router模块
cnpm install vue-router@0.7.13
2. import VueRouter from 'vue-router'
3. Vue.use(VueRouter);
4. 配置路由
var router=new VueRouter();
router.map({
路由规则
})
注意：vue路由规则可以单独抽出来放到一个文件中使用 router.config.js
5. 开启
router.start(App,'#app');
注意:
之前: index.html -> <app></app>
现在: index.html -> <div id="app"></div>
App.vue -> 需要一个 <div id="app"></div> 根元素
项目发布上线
npm run build
vue-cli 脚手架
vue-cli——vue脚手架
帮你提供好基本项目结构
本身集成很多项目模板:
simple 个人觉得一点用都没有
webpack 可以使用(大型项目)
Eslint 检查代码规范，
单元测试
webpack-simple 个人推荐使用, 没有代码检查 （适用于中小型项目）√
基本使用流程
1. npm install vue-cli -g 安装 vue命令环境（全局安装）
验证安装ok?
vue --version
2. 生成项目模板
vue init <模板名> 本地文件夹名称
模板名就是simple、webpack、webpack-simple这些模板
3. 进入到生成目录里面
cd xxx
npm install
4. npm run dev