In the article, a lot of pictures, occupy a certain space. Write background buddy said, vue how to write, how to create a new project vue, then I thought, that vue write a tutorial for the background of the students is necessary, the article barely speak vue relevant content and details of treatment css, reduce unnecessary accept the amount of information, reduce the cost of learning vue. If there are any questions, you can contact me private letters, have not unreasonable, please point out! I was near Ling II!
Installation Environment
Scaffolding mounting vue-cli
1. Install nodejs environment
- Download: (nodejs) [https://nodejs.org/zh-cn/download/]
- Installation (slightly)
2. Install vue-cli tools Series
- npm install -g @vue/cli
- npm install -g @vue/cli-service-global
3. vue create hello-world // initialize with vue hello-world project
3.1 vue create hello-world
3.2 running from the project npm run serve
Many students use the back-end editor is idea, I have here a demonstration of this idea, is not focused on the details of the article, you can view the idea to create vue project
open the project just after the initialization
configuration startup script, with respect to the configuration of java? the script is much simpler
to start:
access address
3.3 Project Contents Introduction:
- node_modules, project dependencies module package, we? module required packages are downloaded to this directory, we do not control the development
- public?? put static files? position, put about large static files
- src project? source file
- assets of small static files
- components ??? components, some common components, such as the login box, input components, etc.
- APP.vue vue project root component
- Primary inlet main.js project file, some of the required basic ?? js css herein may be incorporated
- package.json 项目依赖、介绍、基本配置等的清单文件，我们只需要看，scripts 里面的执行命令即可， 比如serve ->启动， build -> 构建打包
其他 项目运行配置文件，可忽略
Tips：上面的内容了解即可，可不用深入，继续往下添加页面路由
4. 增加路由vue-router
4.1 安装路由 npm install vue-router -S
使用4.2 在项目文件夹下新建router.js
4.3 写入代码
import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from './components/HelloWorld';
Vue.use(Router);
export default new Router({
mode:'history',
routes: [
{
path: '/helloworld',
name: 'HelloWorld',
component: HelloWorld
}
]
})4.4. 新建page文件夹，文件夹下面的都是为页面 .vue文件
4.5 修改router.js
import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from './components/HelloWorld';
import Index from './page/index';
import List from './page/list';
Vue.use(Router);
export default new Router({
mode:'history',
routes: [
{
path: '/helloworld',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/index',
name: 'Index',
component: Index
},
{
path: '/list',
name: 'List',
component: List
},
]
})访问路由：
5. 增加axios， http请求库 (https://www.kancloud.cn/yunye/axios/234845)
5.1 安装库 axios , npm install axios -S
5.2 使用
以上面的list.vue 文件为例：
<template>
<div>
<h3>这是一个list 页面</h3>
<ul>
<li>
<router-link to="/index">Index</router-link>
</li>
</ul>
<h3>下面是axios请求到到数据</h3>
<ul v-if="userList.length">
<li v-for="item in userList" :key="item.id">
姓名：{{item.name}}
</li>
</ul>
<ul v-if="!userList.length">
loading....
</ul>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: "Index",
data(){
return {
userList: []
}
},
created () {
axios('http://localhost:4000/get/alluser')
.then(res => {
this.userList = res.data.users;
})
}
}
</script>
<style scoped>
ul li {
list-style: none;
font-size: 16px;
}
</style>6. 增加脚手架可配置文件 vue.config.js
设置接口的跨域，vue-cli 启动的服务端口等
module.exports = {
devServer: {
port: 8090,
proxy: 'http://localhost:4000'
}
}7. 打包项目
7.1 执行命令 npm run build
7.2 构建结果
会在项目目录下生成dist 文件夹，文件夹下的文件就是我们需要的静态文件
我们把打包后的静态文件扔进服务器即可，或者我们用ngxix 部署静态文件，index.html 就是最终指向的入口文件。