Vue在Node.js下的使用安装 vue-router，axios，Vuex，element-ui

安装vue（包括vue-cli脚手架）

https://segmentfault.com/a/1190000011275993?utm_source=tag-newest

创建项目

在自己选好的目录下shift+右键打开命令行工具

创建自己的vue项目：vue init webpack-simple my-project -------simple用vue提供的简单模板，命名成自己的项目名字

安装项目需要的依赖：npm install --------会自动导入一些包（类似maven下载依赖包）

打开项目：npm run dev

项目目录讲解

https://blog.csdn.net/chao2458/article/details/81284522

使用vue-router

单页面应用构建步骤：添加Vue Router=> 组件映射到路由=>告诉 Vue Router 在哪里渲染它们。

https://router.vuejs.org/zh/guide/#html

import Vue from 'vue'
import App from './App.vue'
//引入路由
import VueRouter from 'vue-router'

//1导入需要的组件
import Foo from './components/Foo.vue'
import Bar from './components/Bar.vue'

Vue.use(VueRouter)

// 2. 定义路由，每个路由应该映射一个组件。其中"component" 可以是通过 Vue.extend() 创建的组件构造器，或者，只是一个组件配置对象。

const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 3. 创建 router 实例，然后传 `routes` 配置，你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
mode:'history',
routes
})

// 4. 创建和挂载根实例。记得要通过 router 配置参数注入路由，从而让整个应用都有路由功能
new Vue({
router,//注意书写规范
el: '#app',
render: h => h(App)
})

5

<router-view></router-view>

路由跳转方法

链接跳转

<router-link to="/foo">Go to Foo</router-link>

6按钮跳转

<button @click="gotoByUrl('/foo')">Go to Foo</button>

gotoByUrl(url){
　　this.$router.push(url);
}

使用axios

参考网址

axios: https://github.com/axios/axios
vue-axios: https://www.npmjs.com/package/vue-axios
qs: https://www.npmjs.com/package/qs

配置全局变量

webpack.config.js配置端口

devServer:
port:'8082'

main配置常规变量

Axios.defaults.baseURL = 'http://localhost:8080'
Axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
Axios.defaults.withCredentials = true

参考文档使用发送请求

使用Vuex

用来管理组件间的状态

使用element-ui

参考安装地址

https://element.eleme.cn/#/zh-CN/component/installation

1.确认style-loader!css-loader是否下载，如果下载，是否在config文件中进行了配置

配置文件如下：

{
test: /\.css$/,
loader: 'style-loader!css-loader',
exclude: /node_modules/
}

但是这样仍然无法正常运行的，因为在elment-ui中css中运用了饿了么的字体库，即.wtff文件，这导致任然缺少一个解析器，即url-loader

npm install url-loader/cnpm install url-loader -D

然后再配置文件中，加上

{
test: /\.(woff|svg|eot|ttf)\??.*$/,
loader: 'url-loader'
},