用vue.js学习es6：基本工具及配置

一.工具：

　　sublime,node.js,npm

　　1.安装sublime 的es6插件：

　　（1）.在sublime中按Ctrl+`调出console

　　（2）.粘贴以下代码到底部命令行并回车（sublime 3）：

　　　　import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path();urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler())); open(os.path.join(ipp,pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

　　（sublime 2）:

　　　　import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')

　　（3）.重启Sublime

　　（4）.如果在Perferences->package settings中看到package control这一项，则安装成功

　　（5）.按下Ctrl+Shift+P调出命令面板,输入javascriptNext：可以看到有es6插件回车安装

　　2.将npm变成cnpm:npm install -g cnpm --registry=https://registry.npm.taobao.org

　　　　注意：只有npm版本大于3.0.8才可以使用vue，npm升级:npm i npm g(最新)

　　3.安装webpack:cnpm install vue -g 

　　4.安装vue命令行工具:cnpm install -g vue-cli

二.步骤：(注意)

　　1.建立文件夹：名字叫vue

　　2.创建项目：D:\vue>vue init webpack es6

　　配置如下：

　　? Project name es6
　　? Project description A Vue.js project
　　? Author wzh
　　? Vue build standalone
　　? Use ESLint to lint your code? No
　　? Setup unit tests with Karma + Mocha? Yes
　　? Setup e2e tests with Nightwatch? Yes

　　3.安装package.json中的插件：

　　（1）.进入es6文件夹：D:\vue>cd es6

　　（2）.D:\vue\es6>cnpm install

　　4.运行：npm run dev

　　如果自动打开了网页（http://localhost:8080/）显示vue的图标以及一些文字就说明运行成功了。

　　5.找到D:\vue\es6\src\components\Hello.vue文件修改：

　　　　<script>

　　　　export default {

　　　　　　name: 'hello',

　　　　　　data () {

　　　　　　　　studyEs6();

　　　　　　　　return {

　　　　　　　　　　msg: '欢迎 to Your Vue.js App'

　　　　　　　　}

　　　　　　}

　　　　}

　　　　function studyEs6(){

　　　　　　alert("学习es6");

　　　　}

　　</script>

　　添加了函数studyEs6()这样就可以执行es6语法了

========================

一、关于vuejs

这是一个MVVM的前端开发框架，model（数据）、viewmode（通讯）、view（视图），它吸取了reactjs和angularjs的长处，核心重点在于组件化的设计原则。

我们都知道一个普通常见的页面，他会由header,body,footer,组成，里面再细分还有nav，list，slidebar等等，组件化就是将这些会重复用到的代码封装起来，在一个页面中需要用到的时候进行引入。

二、搭建脚手架（初始化项目）

做一个项目开始将一些文件环境搭建好，这里vue提供了vue-cli作为项目搭建工具，在nodejs环境下进行安装，nodejs版本在4.0以上

以下是在window环境下的安装步骤

1.node -v 查询版本

2.npm install -g vue-cli 安装vue-cli

3.vue 查看是否安装成功

4.vue list 查看可用模板

5.vue init webpack project-name 选择一个模板（webpack）初始化，注意这里进入到需要项目所在目录，然后根据提示填写作者等内容

6.cd project-name 进入项目文件夹

7.npm insatll 安装依赖，这里是因为在init后文件根目录下有一个package.json文件，这个文件中包含了所需要的包，可以自动安装。在没有这个文件的时候我们需要先init 然后安装所需要的包，package.json会显示安装成功后的包的版本信息

8.npm run dev 启动项目，端口号是8080

vue-cli github地址