Vue.js入门

1、安装node.js

官网：http://nodejs.cn/download/  下载相应的版本，并安装，目录如下

把Node添加到系统环境变量里面，打开cmd命令行，输入npm -v，如果出现如下图的显示，说明已经安装正确。

如果你安装的是旧版本的 npm，可以通过 npm 命令进行升级。

2、安装webpack

安装好 npm 之后，就可以通过 npm 命令来下载各种工具了。

安装打包工具 webpack，-g 表示全局安装。

npm install webpack -g

3、安装vue-cli

安装 vue 脚手架项目初始化工具 vue-cli，-g 表示全局安装。

npm install vue-cli -g

4、淘宝镜像（看情况）

因为 npm 使用的是国外中央仓库，有时候下载速度比较“喜人”，就像 Maven 有国内镜像一样，npm 在国内也有镜像可用。这里建议使用淘宝镜像。

安装淘宝镜像，安装成功后 用 cnpm 替代 npm 命令即可，如： cnpm install webpack -g 。

npm install -g cnpm --registry=https://registry.npm.taobao.org

5、创建项目

vue init webpack my-project  -->输入以上命令之后，安照提示，输入相应的内容即可。

$ vue init webpack kitty 　　-- 这个是那个安装vue脚手架的命令
This will install Vue 2.x version of the template. 　　--这里说明将要创建一个vue 2.x版本的项目
For Vue 1.x use: vue init webpack#1.0 kitty
? Project name (kitty) 　　--项目名称
? Project name kitty
? Project description (kitty project) 　　--项目描述
? Project description kitty project
? Author Louis 　　-- 项目创建者
? Author Louis
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) 　　-- 是否安装Vue路由，也就是以后是spa（但页面应用需要的模块）
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n 　　--是否启用eslint检测规则，这里个人建议选no
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n)
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "kitty".
To get started: 　　-- 这里说明如何启动这个服务
cd kitty
npm install
npm run dev

目录结构如下：

6、安装依赖：npm install

7、启动服务：npm run dev

8、编译打包

开发完成后，通过以下命令就可把整个项目打包，生成到 dist 目录下，直接拷贝到服务器即可。

npm run build

---------------------

VUE项目引入axios：

下载：$ npm install axios --save

引入：import axios from ‘axios’
           Vue.prototype.$axios = axios

 

VUE项目引入element-ui：

下载：npm install element-ui --save 或者 npm i element-ui -S

引入：import elementUI from 'element-ui'

1.   import 'element-ui/lib/theme-chalk/index.css'

2.   Vue.use(elementUI)