vue项目入门笔记

一，总体介绍+工具：

Vue.js： 框架
Vue-cli： 脚手架 搭建基本代码框架
vue-router： 官方插件管理路由
vue-rescource：Ajax通信
Webpack： 构建工具
es6+eslint：eslint：es6代码风格检查工具

思想：

工程化，组件化，模块化

内容：

移动端常用的开发技巧
flex弹性布局
酷炫的交互设计

MVVM框架：

V：视图（DOM）
ViewModel：通讯（观察者）
Model：数据（javascript对象）

二，vue.js介绍

MVVM轻量级框架
数据驱动+组件化
社区完善
借鉴了angular的指令和react的组件化
核心思想：数据驱动，组件化

三，vue-cli开启vuejs项目

1.vue-cli简介

vue脚手架工具（目录结构，本地调试，代码部署，热加载，单元测试）

2.安装运行环境: vue-cli github地址 / 参阅webpack开发文档

• 第一步：如果没有安装node.js则先安装: 官网下载地址
• 第二步：安装vue-cli脚手架

(1) $node -v //要求4.0.0版本以上
(2) $sudo npm install -g vue-cli
//或使用淘宝镜像安装,如果提示代理问题，可通过代码清除:$npm config set proxy null
$sudo npm install -g cnpm --registry=https:/ /registry.npm.taobao.org --verbose
(3) $vue init webpack [project-name] //搭建vue项目
(4) $cd [project-name]；//进入项目
(5)$install vue-router YES //配置环境
   $use eslint to lint your code NO
   $set up unit test  NO
   $setup e2e tests with nightwatch NO
(6) $npm install //安装

安装完成的项目目录

3.项目运行

（1）配置es6语法解决报错；
（2）启动项目

npm run dev

（3）编写一个组件标签：创建一个vue，包括三个块（template，script，style）

4.项目文件目录

build: webpack配置相关
config: 项目配置
node_modules：npm安装的依赖代码库
src：存放项目源码
static：存放第三方静态资源
.babelrc：通过插件把es6编译成es5，stage-数字，数字越小包含的插件（预设插件，转换插件等）越多
.editorconfig：编辑器的配置
.eslintignore：忽略语法检查的目录文件
.eslintrc.js：eslint的配置文件，预先订好的规则或进行修改
.gitigore：git仓库忽略掉输入的文件或者目录
index.html：编码文件
package.json：配置文件

// 下面附上完整的文件目录解析 
.
├── build/                      # webpack config files
│   └── ...
├── config/
│   ├── index.js                # main project config
│   └── ...
├── src/
│   ├── main.js                 # app entry file
│   ├── App.vue                 # main app component
│   ├── components/             # ui components
│   │   └── ...
│   └── assets/                 # module assets (processed by webpack)
│       └── ...
├── static/                     # pure static assets (directly copied)
├── test/
│   └── unit/                   # unit tests
│   │   ├── specs/              # test spec files
│   │   ├── eslintrc            # config file for eslint with extra settings only for unit tests
│   │   ├── index.js            # test build entry file
│   │   ├── jest.conf.js        # Config file when using Jest for unit tests
│   │   └── karma.conf.js       # test runner config file when using Karma for unit tests
│   │   ├── setup.js            # file that runs before Jest runs your unit tests
│   └── e2e/                    # e2e tests
│   │   ├── specs/              # test spec files
│   │   ├── custom-assertions/  # custom assertions for e2e tests
│   │   ├── runner.js           # test runner script
│   │   └── nightwatch.conf.js  # test runner config file
├── .babelrc                    # babel config
├── .editorconfig               # indentation, spaces/tabs and similar settings for your editor
├── .eslintrc.js                # eslint config
├── .eslintignore               # eslint ignore rules
├── .gitignore                  # sensible defaults for gitignore
├── .postcssrc.js               # postcss config
├── index.html                  # index.html template
├── package.json                # build scripts and dependencies
└── README.md                   # Default README file

5.webpack打包 参考教程

四，项目实战：页面骨架开发

1.组件拆分
2.vue-router 安装使用：npm install vue-router
3.数据运算
4.移动端组件库

解决跨域问题：
1.关闭谷歌浏览器；
2.终端运行：open -a /Applications/Google\ Chrome.app --args --disable-web-security --user-data-dir

五，页面结构：

1.created：在模板渲染成html或者模板编译进路由前调用created；初始化某些属性值，然后再渲染成视图
mounted：已完成模板已经渲染或el应对html渲染后；初始化页面完成后，再对dom节点进行一些需要的操作。
2.结构及生命周期：
模板

脚本

样式

vue生命周期图解

六、问题及解决

1.输入vue init wepbpack project-name，提示vue-cli · Failed to download repo vuejs-templates/wepbpack: Response code 404 (Not Found)
解决方案：vue init webpack-simple project-name

2.import decrations are not supported by current javascript version
解决方案：在偏好设置找到javascript，把版本调到es6.

3.lang="stylus" rel="stylesheet/stylus”编译时报错
Error: Module build failed: Error: Cannot find module 'stylus'
解决方案：添加依赖，"stylus": "^0.54.5”,

4.SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
解决方案：安装最新的node.js