vue是当前比较流行的前端框架,是一套构建用户界面的渐进式框架。 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。 Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。 另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。 Vue的特点是: 1.数据绑定。比如你改变一个输入框 Input 标签的值,会自动同步更新到页面上其他绑定该输入框的组件的值 2.组件化。页面上小到一个按钮都可以是一个单独的文件.vue,这些小组件直接可以像乐高积木一样通过互相引用而组装起来
安装环境
首先要安装node.js的环境,可以选择直接安装报安装,也可以选择用npm的环境安装
brew install nodejs
记住,无论是命令行安装还是安装包安装,安装的nodejs一定要是最新的,不然后面可定会报错,报模块包缺失的问题。 当然 ,因为wall的存在,直接用npm命令会比较慢,可以使用淘宝镜像。
npm install -g cnpm --registry=https://registry.npm.taobao.org
然后安装webpack
cnpm install webpack -g
安装vue脚手架(全局)
npm install vue-cli -g
创建一个基于webpack模板的项目
vue init webpack myproject
进行配置
This will install Vue 2.x version of the template.
For Vue 1.x use: vue init webpack#1.0 my-project
? Project name my-project
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "my-project".
To get started:
cd myproject
npm install
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
进入项目,进行安装
cd myproject//进入文件夹
npm install//安装依赖
cnpm install vue-router vue-resource --save//安装vue的路由模块和网络请求
cnpm run dev//运行
***注意,这里安装依赖,不要用cnpm install,安装时,会缺少很多模块包。
vue安装填坑
我所遇到的坑就是之前重点提示,我没执行的出的坑。 报错:
Error: Cannot find module 'opn'
Error: Cannot find module 'webpack-dev-middleware'
Error: Cannot find module 'express'
Error: Cannot find module 'compression'
Error: Cannot find module 'sockjs'
Error: Cannot find module 'spdy'
Error: Cannot find module 'http-proxy-middleware'
Error: Cannot find module 'serve-index'
这个地方就是需要更新vue-cli
npm update vue-cli
启动项目报错:
Module build failed: Error: Cannot find module 'babel-helpers'
Module build failed: Error: Cannot find module 'babel-traverse'
Module build failed: Error: Cannot find module 'json5'
Module build failed: Error: Cannot find module 'babel-generator'
Module build failed: Error: Cannot find module 'detect-indent'
Module build failed: Error: Cannot find module 'jsesc'
按理来说,缺少哪些模块就要下载哪些模块,但是实际过程中,我安装一个缺少一个,安装了老半天,缺少的依赖实在是太多了,所以我就删除了项目,然后在下载依赖是,如上面说的,npm install安装依赖,然后运行成功。