在开始之前,首先介绍一个Vue这个框架
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
而且由于研发团队中有国人,所以文档的中文版也比较易懂。
刚开始时通过CDN引入Vue打demo,但需要进行组件切换和自定义组件时,通过CDN引入就显得过于麻烦了,所以在上周对之前的demo进行了代码重构,引入了Vue-cli的框架,现在记录Vue-cli项目的搭建过程
1.安装Npm
直接从官网下载最新版即可,会和Node.js一起下载
2.安装淘宝镜像
因为很多包是国外的,所以安装淘宝镜像后下载速度会快些,也能解决一些包无法下载的情况。
在命令行输入:
npm install -g cnpm --registry=https://registry.npm.taobao.org
3.安装Vue-cli
在命令行输入:
npm install -g vue-cli
4.创建初始化项目
因为Vue-cli包含了Webpack,所以可在命令行直接输入:
vue init webpack project-name
project-name是项目的名字,自己决定
5.运行项目
先进到项目的文件夹安装依赖,在命令行输入:
npm install
然后在命令行输入:
npm run dev
一般会直接在浏览器弹出网页,如果没有弹出,按命令行的域名访问即可
6.安装其他库
例如要安装Vue router 或者 iview的话,在命令行输入:
npm install vue-router iview --save
7.项目打包
在命令行输入:
npm run build