Vue 框架搭建
vue框架的搭建
使用VUE首先须要下载安装一些列的环境。css
第一步：html
安装Node.jsvue
下载并安装：node-v8.9.0-x64.msinode
第二步：python
安装Vue脚手架：webpack
cmd以管理员身份执行ios
npm install vue-cli -g 或者安装淘宝版 cnpm install vue-cli -gweb
vue -V 查看是否安装成功vue-router
第三步：vue-cli
建立项目：
vue init webpack myProject (项目名字)
提示内容：
而后初始化：
vue init webpack myProject
第四步：
切换到项目目录下，安装依赖包。
cd myProject
npm install 安装
安装以后 查看浏览器localhost:8080 是否有 welcome to You Vue.js App字样。
有就表明环境配置以及项目建立成功了。
接下来准备敲代码。。。。
稍等，讲解一下Vue框架的逻辑。
Vue 单页面应用。
一个项目，只能建立一个new Vue。
Vue可以自动刷新。
vue项目建立成功以后，
测试npm run dev ，查看localhost 8080 可否查看，测试成功以后，
用pycharm打开项目目录，
如下是各个目录详细：
项目目录内，node_modules目录通常是放依赖包，安装的依赖包去这里查看是否安装成功。
src通常放项目须要的程序以及组件等等。
Vue项目的通常逻辑是：
用户直接访问的是index.html
index.html下面是 App.vue 和 main.js 经过路由的方式(index.js) 链接组件components ，目录中的组件，渲染具体内容。
因此编写思路就是：
1 建立组件（Vue文件）
2 配置路由
3 编写路径 （router-link）
而后是代码：
在src目录下的components目录下建立组件：
duanzi.vue
复制代码
1 <template>
2 <div class="hello">
3 <h1>{{ temp }}</h1> //渲染msg变量
4 <h2>hey girl</h2>
5 <ul>
6 <li v-for="item in arr"> //循环arr数组
7 姓名：{{item.name}}
8 性别：{{item.sex}}
9 年龄：{{item.age}}
10 </li>
11 </ul>
12 <div>
13 <ul>
14 <li>
15 姓名：<input type="text" v-model="username"> //input框输入信息
16 </li>
17 <li>
18 年龄：<input type="text" v-model="userage">
19 </li>
20 <li>
21 性别：<select v-model="usersex"> //select下拉框
22 <option value="男" selected>男</option>
23 <option value="女" >女</option>
24 </select>
25 </li>
26 </ul>
27 </div>
28 <input type="button" value="增长" v-on:click="addStu"> //button 绑定事件 addStu函数
29 </div>
30
31 </template>
32
33 <script>
34 export default {
35 name: 'duanzi',
36 data () {
37 return {
38 temp: '我是duanzi页面', //定义temp须要渲染的内容
39 arr:[], //methods内的函数须要的变量须要如今data中定义，避免函数内是window对象。
40 username:'',
41 usersex:'男',
42 userage:''
43 }
44 },
45 mounted:function () { //mounted函数指的页面一渲染首先执行的函数。 这里首先执行showlist函数
46 this.showList()
47 },
48 methods:{ //函数通常都写在这里，能够写多个函数。
49 showList(){ //这里是写死一个数组，data里的空列表实际就是为了这个数组而声明一下，否则this指的是window对象，而不是data中的列表。
50 this.arr = [{
51 name:'tom',age:18,sex:'male'},
52 {name:'jerry',age:19,sex:'male'}]
53 },
54 addStu(){ //绑定事件的函数，在arr数组中添加用户在input框中输入的内容。提交以后就能实时渲染到页面了。
55 this.arr.push({name:this.username,age:this.userage,sex:this.usersex})
56 }}
57 }
58 </script>
59
60 <!-- Add "scoped" attribute to limit CSS to this component only -->
61 <style scoped> //下面是一些默认的css样式。
62 h1, h2 {
63 font-weight: normal;
64 }
65 ul {
66 list-style-type: none;
67 padding: 0;
68 }
69 li {
70 /*display: inline-block;*/
71 margin: 0 10px;
72 margin-bottom: 10px;
73 }
74 a {
75 color: #42b983;
76 }
77 </style>
在建立另外一个组件HelloWorld.vue：
复制代码
<template>
2 <div class="hello">
3 <h1>{{ msg }}</h1>
4 <h2>hey boy</h2>
5
6 </div>
7
8 </template>
9
10 <script>
11 export default {
12 name: 'HelloWorld',
13 data () {
14 return {
15 msg: 'hello world'
16 }
17 },
18 methods:{
19 showme:function(){
20 alert(this.msg)}
21 }
22 }
23 </script>
24
25 <!-- Add "scoped" attribute to limit CSS to this component only -->
26 <style scoped>
27 h1, h2 {
28 font-weight: normal;
29 }
30 ul {
31 list-style-type: none;
32 padding: 0;
33 }
34 li {
35 display: inline-block;
36 margin: 0 10px;
37 }
38 a {
39 color: #42b983;
40 }
41 </style>
代码道理和duanzi.vue同样，只是输出内容不同，实现两个页面。
以后在App.vue中配置具体渲染位置。
在index.js中配置路由。
<template>
2 <div id="app"> //最外层div，这里的id很重要，这里的id和index.html是一致的，表明将渲染到的位置。
3 <h1>澳门首家在线赌场</h1> //这里写的标签在两个组件的页面都能显示，相似django模板继承效果。
4 <router-link to="/"> helloworld</router-link>
5 //这里的router-link 就是将组件渲染到这里，实际是一个a标签，to写的是path路径，和index.js中是一致的。
6 <router-link to="/duanzi"> duanzi</router-link>
7 <router-view/> //这个router-view 是关键点，不能删除。
8 </div>
9 </template>
10
11 <script>
12 export default {
13 name: 'app' //这里也是写那个id。
14 }
15 </script>
16
17 <style> //下面是默认样式
18 #app {
19 font-family: 'Avenir', Helvetica, Arial, sans-serif;
20 -webkit-font-smoothing: antialiased;
21 -moz-osx-font-smoothing: grayscale;
22 text-align: center;
23 color: #2c3e50;
24 margin-top: 60px;
25 }
26 </style>
上面是配置App.vue,下面开始配置index.js路由
1 import Vue from 'vue' //这里的导入和python不太同样须要注意。
2 import Router from 'vue-router'
3 import HelloWorld from '@/components/HelloWorld' //导入两个组件，@表明从根目录下找。
4 import duanzi from '@/components/duanzi'
5
6 Vue.use(Router)
7
8 export default new Router({
9 //路由除了建立项目的时候安装，也能够单独安装
10 routes: [
11 {
12 path: '/', //路径须要和App.vue中一致，否则找不到。/目录建议默认一个，否则首页会为空。
13 name: 'HelloWorld', //这个名字不是很重要，可写可不写，主要是区分组件功能。
14 component: HelloWorld //写组件文件名字。
15 },
16 {
17 path: '/duanzi',
18 name: 'duanzi',
19 component: duanzi
20 }
21 ]
22 })
如上就是路由的配置。
main.js代码：
1 import Vue from 'vue'
2 import App from './App'
3 import router from './router'
4 import axios from "axios"
5 Vue.config.productionTip = false
6 Vue.prototype.axios=axios
7 /* eslint-disable no-new */
8 new Vue({
9 el: '#app',
10 router,
11 template: '<App/>',
12 components: { App }
13 })
index.html代码：
<!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 6 <title>myvue</title> 7 </head> 8 <body> 9 <div id="app"></div> 10 <h2>我是index.html</h2> //这里我写了个h2标签，区分一下效果。 11 12 13 <!-- built files will be auto injected --> 14 </body> 15 </html>
写完代码，咱们能够经过npm start （npm run dev也能够）在cmd中启动Vue项目，而后经过http://localhost:8080 访问内容。
如下为实现效果：
另外一个页面：