vue框架的搭建
使用VUE首先需要下载安装一些列的环境。
第一步:
安装Node.js
下载并安装:node-v8.9.0-x64.msi
第二步:
安装Vue脚手架:
cmd以管理员身份执行
npm install vue-cli -g 或者安装淘宝版 cnpm install vue-cli -g
vue -V 查看是否安装成功
第三步:
创建项目:
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 访问内容。
以下为实现效果:
另一个页面:
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。