1、 安装node.js

    直接在node官网 https://nodejs.org/en/download/ ,下载,我这里用的是64位安装板

2、安装淘宝镜像, 然后就可以使用cnpm 了

    npm install -g cnpm --registry=https://registry.npm.taobao.org 这里是从别人那里复制的

3、安装webpack

    cnpm install webpack -g

这是一个打包工具  将你的代码打包生成静态文件  然后直接放在服务器运行就可以了

4、安装vue脚手架

    cnpm install vue-cli -g  

这是用于搭建vue环境的东西

5、进去文件目录 ,创建项目

 Vue脚手架新建项目

    vue  init  webpack hellovue  跟当前项目名相同

6、项目名

Vue脚手架新建项目  自己起 项目名 必须小写

7、项目描述

Vue脚手架新建项目  这个可以随意写(这些是写在配置文件里的东西,不影响代码)

8、author

Vue脚手架新建项目  作者名字 我就用自己  (这些是写在配置文件里的东西,不影响代码)

9、vue build

Vue脚手架新建项目

选择第一个   运行和编译

10、安装vue-router

Vue脚手架新建项目  vue-router 这个很重要  ,路由,页面跳转和传值就靠这个

11、ESL不安装

Vue脚手架新建项目  语法检测 建议不用

12、单元测试不安装

Vue脚手架新建项目 

13、选择 userNPM 安装项目

Vue脚手架新建项目 

通过npm install 安装依赖  初始化项目

14、安装 axios 

这个是官方推荐的   向服务器发送请求的一个插件

    install axios -S

在main.js中引入
import axios from 'axios'
import VueAxios from 'vue-axios’
Vue.use(VueAxios, axios)

然后新建一个js类,写配置文件 

Vue脚手架新建项目


然后在created方法中请求数据

Vue脚手架新建项目

15、如果没有 npm install webpack --save-dev 

16、安装elementUI

npm install element-ui -S

cnpm install style-loader –save-dev 
cnpm install css-loader –save-dev 

cnpm install file-loader –save-dev

然后在 main.js中引入

Vue脚手架新建项目

Vue.use(ElementUI)

17、






相关文章: