一.安装nodeJs
1.打开NodeJs官网：https://nodejs.org/en/download/ 点击下载
2.双击安装，安装过程基本直接“NEXT”就可以了。（windows的安装msi文件在过程中会直接添加path的系统变量，变量值是你的安装路径，例如“C:\Program Files\nodejs”）
3.安装完成后可以使用cmd（win+r然后输入cmd进入）测试下是否安装成功。方法：在cmd下输入node -v，出现下图版本提示就是完成了NodeJS的安装。
4、npm的安装。由于新版的NodeJS已经集成了npm，所以之前npm也一并安装好了。同样可以使用cmd命令行输入"npm -v"来测试是否成功安装。如下图，出现版本提示便OK了。
参考： NodeJS、NPM安装配置步骤(windows版本)
二.安装vue
1.npm install -g vue-cli
//全局安装vue-cli (vue-cli是vue的脚手架工具，脚手架其实是帮助我们写好vue.js基础代码工具)
2.npm install -g webpack //全局安装webpack
3.npm install -g webpack-dev-server //安装webpack的本地webserver
4.判断是否vue 和webpack 安装成功 所以只需输入vue -V 和 webpack -v 查看版本号
注意：如果这时候出现一下图片。是因 webpack4正式发布了,但是当我们安装之后,使用下面的语句来打包的时候,发现打包失败了。所以
大概意思是:cli被移到了一个叫webpack-cli的包里面,请安装webpack-cli 的除了webpack本身使用cli,
当使用的是npm:npm install webpack-cli -D
当使用yard:yarn add webpack-cli -D
解决方法:
1.全局安装一下webpack-cli：npm install webpack-cli -g
当安装完之后,就能显示版本号了,
注意点:安装好之后,打包文件的时候必须在webpack.config.js文件里面配置入口出口文件来打包,不然的话会报错.使用的时候尽量还是不要在生产环境使用.官网上也说了一句话:安装这些最新体验版本时要小心！它们可能仍然包含 bug，因此不应该用于生产环境。
2.在项目目录下要本地安装webpack-cli -D
npm install webpack-cli -D
三.创建新项目
1.在E盘创建项目：E:\practice_project\elements-demo (文件名要小写，或者会提示Sorry, name can no longer contain capital letters.)
2.打印cmd
① 找到 E盘：执行 E:
② cd practice_project
③vue init webpack elements-demo
④会有一些初始化的设置，如下输入:
Target directory exists. Continue? (Y/n)直接回车默认(然后会下载 vue2.0模板，这里可能需要连代理)
Project name (vue-test)直接回车默认
Project description (A Vue.js project) 直接回车默认(这个项目是个vuej.js的项目)
Author 写你自己的名字
》Runtime + Compiler: recommended for most users
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere 直接回车默认
这里选择Runtime + Compiler: recommended for most users；
Install vue-router?yes (要用路由?)
Use ESLint to lint your code? no （这是说你要不要ESlint的语法去监控你的代码,建议不用）
Set up unit tests、Setup e2e tests with Nightwatch? no (不要走测试的路，这个我觉得无所谓，，因为我每次都是把项目按照要发布的去做的，所以我选no)
Should we run `npm install` for you after the project has been created? (recommended) 第一个npm (是说项目被创建后，用npm install 来安装依赖，还是选其他的。跟着文档走，所以我选第一个npm)
⑤.运行：cd elements-demo 进入这一级
⑥.运行：npm install
⑦.运行：npm run dev
⑧浏览器：http://localhost:8080/#/
四.使用vue-cli再一次创建新项目
①打开cmd 找到项目要放在那个盘 e:
②执行cd ylz_project
③ 执行 vue -V
④执行vue list
⑤vue init webpack elm-app (回答更上面提的问题一样)
注意：这时候如果出错，一直创建不成功的话
有可能是服务器不稳定把，所以安装cnpm
重新打开cmd 运行 npm install cnpm -g --registry=https://registry.npm.taobao.org
cnpm -v 测试是否安装成功
注意：安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开，安装完直接使用有可能会出现错误；
重新打开cmd 找到项目cd ylz_project/elm-app
执行cnpm install
在执行cnpm run dev 就可以啦。
⑥如果没有出错的话，cd elm-app
⑦执行npm install
⑧执行npm run dev 运行项目
四.引入Elements ui
1.打开cmd 找到项目文件
① 找到 E盘：执行 E:
② cd practice_project\elements-demo
③npm i element-ui -S
2.打开elements-demo\src\main.js 文件 补充红色部分
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
/* eslint-disable no-new */
Vue.use(ElementUI)
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
我是直接这样的，
参考官网：http://element.eleme.io/#/zh-CN/component/quickstart
3.测试例如：在src/components/HelloWorld.vue做一下修改
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="text">文字按钮</el-button>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style> 4.运行 npm run dev
五.运行已有项目
①打开cmd 找到已存在的项目文件 cd practice_project\elements-demo
② 运行 npm run dev
六.补充安装axios +sass+store
(1).安装axios(ajax的封装）
1.找到项目的时候 还需要 ：npm install --save axios
2.打开elements-demo\src\main.js 文件 补充红色部分
import Vue from 'vue'
import ElementUI from 'element-ui'
import App from './App'
import router from './router'
import axios from 'axios'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.prototype.$http = axios
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
4.运行项目：npm run dev
5.使用
A. api/api.js
//api.js 数据接口
import axios from 'axios';
const ERR_OK = 0;
//获取商家信息
export const getSeller=()=>{
return axios.get('/api/seller').then((response) =>{
response=response.data;
if(response.errno === ERR_OK){
return response.data;
}
}).catch(function (error) {
return error;
});
}B.组件中使用
引入：import { getSeller} from '@/assets/api/api'; 获取数据
//获取商家信息
sellerGet(){
getSeller().then((res)=>{
this.seller=res;
})
}(2).安装sass
1.找到这个项目文件 ：安装sass的依赖包
npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass注意：必须是找到项目后 执行 语句
2.测试：在app.vue中
3.运行项目：npm run dev
(3).安装store
1.找到项目的时候 还需要 ：npm install vuex --save
2.main.js文件中导入并注册vuex
//项目状态 vuex
import store from './store/store'
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
参考这个安装：Vue学习笔记进阶篇——vuex安装及使用
3.运行：npm run dev
(4).引入jq
1.找到项目的时候 运行：npm install jquery --save-dev
参考步骤：vue引入JQ的方法
(5).安装css-loader
1.找到项目 运行：npm install css-loader --save-dev
(6).安装better-scroll
1.找到项目 运行： npm install --save better-scroll
(7).vue项目添加一些触摸事件以及fastclick的支持
①先执行安装fastclick的命令。
找到项目 运行：npm install fastclick -D
②在main.js中引入，并绑定到body
import FastClick from 'fastclick'
FastClick.attach(document.body)(8).vue项目配置了babel-polyfill 兼容低版本浏览
①找到项目 运行：npm install --save babel-polyfill
②在main.js中引入，
import 'babel-polyfill'
(9).配置jsonp
①找到项目 运行：npm install jsonp --save
②使用
首先assets/js/jsonp.js 封装jsonp
//引入jsonp：解决跨域问题
import originJsonp from 'jsonp'
/**
* 封装jsonp
* @param {*} url 原始的jsonp第一个参数是url，第二个参数是option，这里为了比较好写参数做了下封装
* @param {obj} data 参数
* @param {*} option jsonp的option
*/
export default function jsonp(url, data, option) {
// 如果url没有？就加一个？拼接
url += (url.indexOf('?') < 0 ? '?' : '&') + param(data);
return new Promise((resolve, reject) => {
// 原始jsonp的三个参数，url、option、回调函数
originJsonp(url, option, (err, data) => {
// 类似node的设计，如果err是null，表示成功，data是后端返回的数据
if (!err) {
resolve(data)
} else {
reject(err)
}
})
})
}
//封装 拼接data 到url 的方法
export function param(data) {
let url = ''
for (var k in data) {
let value = data[k] !== undefined ? data[k] : ''
url += '&' + k + '=' + encodeURIComponent(value)
}
return url ? url.substring(1) : ''
}
A.获取线上的数据：QQ音乐
(10).VUE图片懒加载-vue lazyload插件的简单使用
①找到项目 运行：npm install vue-lazyload --save-dev
②在main.js中引入，
import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad,{
error:'./static/error.png',
loading:'./static/loading.png'
})③使用的时候：
vue文件中将需要懒加载的图片绑定 v-bind:src 修改为 v-lazy
<img class="item-pic" v-lazy="newItem.picUrl"/>