前后端分离之建立vue项目(一)

之前一直听说前后端分离,但是一直没有接触过,现在就一步步摸索,做一下记录…本篇文章是为前后端分离项目作搭建准备,具体vue基础语法可以去官网参考文档,或者参考vue案例vue-learning

Node.js安装

这个没啥好说的,去官网下载安装就好,安装完后检查版本号:

node -v

安装淘宝镜像

在安装完node之后,其实它还默认给你安装了npm,通常称为Node包管理器:

npm -v

但是,毕竟国外的镜像,总感觉慢,使用下边的命令采用淘宝的镜像

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

安装vue-cli

cnpm install vue-cli -g

安装成功后vue -V可查看版本信息

安装webpack

cnpm install webpack -g

创建vue项目

vue init webpack-simple my-poject--name

根据信息选择,可一路回车

启动运行

//进入目录
cd my-poject--name
//安装依赖的模块
npm install
//以生产环境启动项目
npm run dev

访问项目

http://localhost:8080

可以看到一个简单的页面了,接下来去除一些无用代码

去除无用代码

打开app.vue,改成如下:

<template>
  <div id="app">
   app
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      
    }
  }
}
</script>

<style>

</style>

删除assets下log文件
然后在终端或者cmd停掉服务,ctrl+c

安装vue路由

npm install vue-router -d

-d代表在当前项目添加

配置路由

main.js:

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'

import routes from './js/router/routes.js'

Vue.use(VueRouter)

const router = new VueRouter({
	//去掉链接中#号
	mode:'history',
	routes:routes
})

new Vue({
	router,
	el: '#app',
	render: h => h(App)
})

在src下新建js/router/routes.js

import Foo from '../../components/Foo.vue'
import Bar from '../../components/Bar.vue'

export default[
	{path: '/foo', component:Foo},
	{path: '/bar', component:Bar}
]

在src下新建components/Bar.vue

<template>
	<div id="bar">
		bar
	</div>
</template>

<script>
	export default {
		name:"bar",
		data() {
			return {
				
			};
		}
	}
</script>

<style>

</style>

在src下新建components/Foo.vue

<template>
	<div id="foo">
		foo
	</div>
</template>

<script>
	export default {
		name:"foo",
		data() {
			return {
				
			};
		}
	}
</script>

<style>

</style>

修改App.vue

<template>
  <div id="app">
    app
		<router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      
    }
  }
}
</script>

<style>

</style>