二、安装Node.js步骤
1、下载对应你系统的Node.js版本:https://nodejs.org/en/download/
2、选安装目录进行安装
3、环境配置
4、测试
三、前期准备
1、Node.js简介
简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于Chrome V8引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。Node.js 的包管理器npm，是全球最大的开源库生态系统。
2、下载Node.js
打开官网下载链接:https://nodejs.org/en/download/，
四、开始安装
1、下载完成后，双击“node-v11.3.0-x64.msi”，开始安装Node.js
一路点击【Next】按钮，其中安装目录自行选择（不建议装在C盘）
至此Node.js已经安装完成，可以先进行下简单的测试安装是否成功了，后面还要进行环境配置
在键盘按下【win+R】键，输入cmd，然后回车，打开cmd窗口
安装vue
npm install -global vue-cli
1。使用淘宝镜像文件(苹果系统：$npm cnpm与npm同用法)
npm config set registrg https://registry.npm.taobao.org
//验证
npm config get registry
//更新淘宝镜像文件
npm install -g npm
2.创建vue项目
vue init webpack-simple 项目名
2.1进入项目文件夹
cd 项目名
2.2初始化
npm install
2.3启动项目（2.5）(cnpm相同)
npm run dev
3.0启动方式(cnpm相同)
npm run serve
4.0创建组件文件
4.1在vue.app中引入组件
<template>
<div id="app">
<product-list-one></product-list-one>
<product-list-two></product-list-two>
</div>
</template>
<script>
import ProductListOne from './components/productListOne.vue'
import ProductListTwo from './components/productListTwo.vue'
export default {
name: 'app',
components:{
'product-list-one':ProductListOne,
'product-list-two':ProductListTwo,
},
data () {
return {
}
}
}
</script>
<style>
</style>
5.0在项目文件夹中引入vuex插件
npm install vuex --save
5.1创建store.js文件
5.2引入vuex并添加数据
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store=new Vuex.Store({
state:{
products:[
{name:"马克思",price:99999},
{name:"马克龙",price:100},
{name:"马英九",price:80},
{name:"马化腾",price:200},
{name:"马云",price:180},
]
}
});
6.0在组件productListOne.vue中接受数据并使用
<template>
<div id="product-list-one">
<h1>product-list-one</h1>
<ul>
<li v-for="product in products">
<span class="name">
{{product.name}}
</span>
<span class="price">
${{product.price}}
</span>
</li>
</ul>
</div>
</template>
<script>
export default {
computed:{
products(){
return this.$store.state.products
}
}
}
</script>
<style>
</style>
重启项目
npm run dev
cnpm install vue-router
npm install vuex --save
npm install axios -S
npm install --save-dev babel-polyfill
npm install echarts -S
npm install element-ui
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install node-sass --save
npm install sass-loader --save-dev
npm install font-awesome
npm install font-awesome
在main.js里添加
import 'font-awesome/css/font-awesome.css'
