4、vueJs基础知识04

简单的目录结构:
　　|-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