VueJS + CLI3.0初探

Vue.js

Vue：https://cn.vuejs.org/
Vue CLI：https://cli.vuejs.org/zh/
ES6：http://es6.ruanyifeng.com/

开发环境

1.Node http://nodejs.cn/ 。
2.npm node安装包都带的包管理工具 默认安装。
3.yarn https://yarn.bootcss.com/ 也是包管理工具。

这是官网对Yarn的介绍 ：
Yarn 缓存了每个下载过的包，所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率，因此安装速度更快。

4.IDE看自己喜好，我这里使用的是VSCode。

构建工程

略过复杂的项目搭建，这里我直接使用脚手架进行项目创建，使用的是Vue CLI，使用到3.x版本的@vue/cli。
Vue CLI是基于Vue.js进行快速开发的完整系统。

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli(1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

#使用 npm
npm install -g @vue/cli 

# 或者使用yarn 
yarn global add @vue/cli

成功安装CLI后可以使用命令 vue --version 查看版本

安装完成后我们使用命令 vue create 进行项目创建

    vue create my-app

默认预设里包含了vue-router,vuex,babel,eslint等基本的设置。项目创建成功后使用命令行工具cd到my-app

cd my-app

yarn serve
# or
npm serve
#or 
vue ui

上面的三条启动命令都可以启动项目，vue ui是vue cli3增加
图形化界面创建和管理工具

通过上面的命令 就可以将项目运行起来了。通过浏览器访问
http://localhost:8080/ 就可以看到项目的欢迎页