vue框架搭建教程|如何快速搭建vue框架？

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: duanzi20         }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 访问内容。

来千语创想移动应用开发平台学习更多APP开发知识：app开发，app制作，app开发源码下载，app开发框架，app制作模板等免费获取。

立即免费在线制作一个APP，新手注册即送开发大礼包