vue项目的搭建

　　一、Vue自动化工具的安装

nvm：nodejs 版本管理工具。
也就是说：一个 nvm 可以管理很多 node 版本和 npm 版本。
nodejs：在项目开发时的所需要的代码库
npm：nodejs 包管理工具。
在安装的 nodejs 的时候，npm 也会跟着一起安装，它是包管理工具。
npm 管理 nodejs 中的第三方插件

　　1，安装nvm

　　它是一个node管理工具，当我们的电脑上有多个node版本时，nvm可以帮我们切换node版本。

　　下载地址：https://github.com/coreybutler/nvm-windows/releases

　　下载下来后解压安装就可以了，然后配置环境变量：我是解压在d盘的tool文件夹下，

　　常用的nvm命令：直接在cmd中输入

nvm list                            # 列出目前在nvm里面安装的所有node版本
nvm install node版本号       　　　　　# 安装指定版本的node.js
nvm uninstall node版本号   　　　　　　# 卸载指定版本的node.js
nvm use node版本号          　　　　　　# 切换当前使用的node.js版本

　　2，安装node

　　由于我们已经安装上nvm，所以我们就可以借助nvm安装node，由于install默认是从国外下载，所以速度有可能会慢，我们可以把使用国内的镜像，这样速度就会快点，于是我们需要修改nvm文件夹下的settings.txt文件，

arch: 64
proxy: none
node_mirror: http://npm.taobao.org/mirrors/node/ 
npm_mirror: https://npm.taobao.org/mirrors/npm/
只需要在settings.txt文件下加上这四行代码既可

　　在cmd中输入：nvm install node版本号就行了

　　3，安装npm

　　在安装node完成后，会同时帮我们安装一个包管理器npm，所以在上面安装node的时候就已经帮我们安装好npm了。npm就相当于python的pip，可以通过npm命令来安装node的包。常用命令：

npm install -g 包名              # 安装模块   -g表示全局安装，如果没有-g，则表示在当前项目安装
npm list                        # 查看当前目录下已安装的node包
npm view 包名 engines            # 查看包所依赖的Node的版本 
npm outdated                    # 检查包是否已经过时，命令会列出所有已过时的包
npm update 包名                  # 更新node包
npm uninstall 包名               # 卸载node包
npm 命令 -h

　　4，安装Vue-cli

　　直接在cmd中输入：npm install -g vue-cli

　　二、使用Vue-CLI创建项目

　　例如我想d盘的data文件夹下创建一个vue项目，于是我们打开cmd，来到d盘下的data目录输入：vue init webpack 项目名

　　访问提供的地址：

　　项目创建完成。

// 生成一个基于 webpack 模板的新项目
vue init webpack 项目名
// 启动开发服务器

cd myproject

npm run dev           # 运行这个命令就可以启动node提供的测试http服务器



ctrl+c 停止服务器

　　三、项目目录结构和执行流程

　　1，目录结构

　　用pycharm打开项目：

src   主开发目录，要开发的单文件组件全部在这个目录下的components目录下
static 静态资源目录，所有的css，js文件放在这个文件夹
dist项目打包发布文件夹，最后要上线单文件项目文件都在这个文件夹中[后面打包项目,让项目中的vue组件经过编译变成js 代码以后,dist就出现了]
node_modules目录是node的包目录，
config是配置目录，
build是项目打包时依赖的目录
src/router   路由,后面需要我们在使用Router路由的时候,自己声明.

　　2，执行流程

　　整个项目的主文件是index.html，index.html会引入src文件夹中的main.js文件,main.js文件会导入顶级单文件组件App.vue文件,App.vue文件会通过组件嵌套或者路由来引用components文件夹中的其他单文件组件。

　　四、初始化项目

　　1，清除页面上默认存在的东西，还原得到一个空白的页面

　　1.1 删除helloworld组件

　　1.2 清除App.vue下的样式

　　现在，再次打开地址，就是空白的：

　　2，安装路由vue-router

　　2.1 下载路由组件

　　要在本项目的目录下输入指令：npm install vue-router

　　2.2 配置路由

　　首先在src文件夹创建一个routers的文件夹，然后再routers文件夹下创建一个index.js文件，写入：

import Vue from "vue"
import Router from "vue-router"
// 这里导入可以让让用户访问的组件
Vue.use(Router);
export default new Router({

// 设置路由模式为‘history’，去掉默认的#

  mode: "history",

routes:[

// 路由列表
]

})

　　其次是打开main.js文件，把router对象注册到vue中

　　最后在App.vue组件，添加显示路由对应的内容

　　这样，关于路由的配置就完成了，我们之后只需要在index.js文件中添加路由列表既可

　　3、引入ElementUI

　　在之前的前端页面中我们使用过jQuery，bootstrap框架，在vue前端项目中，我们可以使用ElementUl框架，它和bootstrap一样的，别人已经写好的组件，我们直接拿来用既可，很方便。

　　3.1 快速安装elementUI

　　在本项目的目录下输入指令：npm install element-ui

　　3.2 配置elementUI

　　在main.js文件中写入：

　　4，引入axios

　　4.1 下载axios

　　在项目的目录下输入指令：npm install axios

　　4.2 配置axios

　　在main.js文件中，导入axios，并把它挂载到vue中

　　五、创建一个组件

　　1，在components文件夹中创建一个后缀为vue的文件

<template>
  <div>
    //在这写html
  </div>
</template>
<script>

export default {

name:'home',

data:function () {

return {

// 这里是data数据

}

}

}

</script>
<style scoped>

//这里写css代码

</style>

　　2，添加路由列表

　　在index.js文件中写入：

　　六、创建子组件，添加到其他组件中，完成组件嵌套

　　1，也是要创建组件

　　只要是组件，其创建过程都是一样的，也要那三部分组成

　　2，把子组件引入到其他组件中，我把forms组件引入到tables组件中去

　　把子组件引入到其他组件中去，我们不需要对子组件做任何改动，只需要在父组件（即要引入子组件的组件）添加代码就行

　　七、效果

　　1，代码

<template>
  <div id="tables">
    <el-button type="primary" @click="add">添加</el-button>
    <table>
            <tr>
                <th>ID</th>
                <th>名称</th>
                <th>面积</th>
                <th>人口</th>
                <th>GDP</th>
                <th>操作</th>
            </tr>
            <tr v-for="value,key in tableData">
                <td>{{value.id}}</td>
                <td>{{value.name}}</td>
                <td>{{value.area}}</td>
                <td>{{value.population}}</td>
                <td>{{value.gdp}}</td>
                <td>
                    <el-button type="info" @click="edit(key)">编辑</el-button>
                    <el-button type="warning" @click="del(key)">删除</el-button>
                </td>
            </tr>
        </table>
    <forms :province="province" :state="state" :tableData="tableData" @cancel="is_show" :edit_key="edit_key"/>
  </div>
</template>
<script>

import forms from './forms'

export default {

name:'tables',

data:function () {

return {

tableData: [{

id: 1,

name: '广东',

area: 20.3,

population:5.3,

gdp:5.5

},],

province:{},

state:false,

edit_key:-1

}

},

components:{

forms

},

created:function(){

let _this=this;

this.$axios.get('http://127.0.0.1:8000/homework/tables/')

.then(function (response) {

_this.tableData=response.data;

})

.catch(function (error) {

console.log(error);

});

},

methods:{

add:function () {

this.state=true

},

is_show:function (value) {

this.state= !value;

this.province={};

this.edit_key=-1

},

edit:function (key) {

this.state=true;

this.edit_key=key;

this.province=this.tableData[key]

},

del:function (key) {

this.tableData.splice(key,1)

}

}

}

</script>
<style scoped>

#tables{

  width: 1200px;

margin: 0 auto;

}

table{

width: 1000px;

border-collapse: collapse; /* 合并表格的边框 */

}

tr{

height: 42px;

}

table,td,th{

border: 1px solid black;

text-align: center;

}

</style>

tables.vue代码

<template>
  <div id="forms" v-show="state">
    <div class="box">
      <el-row>
        <el-col :span="24">
          <label for="name">名称:</label>
          <input type="text" id="name" v-model="province.name">
        </el-col>
        <el-col :span="24">
          <label for="area">面积:</label>
          <input type="text" id="area" v-model="province.area">
        </el-col>
        <el-col :span="24">
          <label for="population">人口:</label>
          <input type="text" id="population" v-model="province.population">
        </el-col>
        <el-col :span="24">
          <label for="gdp">GDP:</label>
          <input type="text" id="gdp" v-model="province.gdp">
        </el-col>
        <el-col :span="24">
          <el-button type="success" @click="edit_key<0?add():save()">提交</el-button>
          <el-button type="danger" @click="cancel">取消</el-button>
        </el-col>
      </el-row>
    </div>
</div>

</template>
<script>

export default {

name:'forms',

props:['province','state','tableData','edit_key'],

data:function () {

return {
  }
},
methods:{
  add:function () {
    let value</span>=<span style="color: #000000;">0;
    </span><span style="color: #0000ff;">if</span> (this.tableData.length==<span style="color: #000000;">0){
       value</span>=1<span style="color: #000000;">
    }
    </span><span style="color: #0000ff;">else</span><span style="color: #000000;"> {
        value</span>=this.tableData[this.tableData.length-1].id+1<span style="color: #000000;">;
    }
    this.province[</span><span style="color: #800000;">'</span><span style="color: #800000;">id</span><span style="color: #800000;">'</span>]=<span style="color: #000000;">value;
    this.tableData.push(this.province);
    this.cancel();
  },
  save:function(){
    this.cancel();
    let num</span>=<span style="color: #000000;">this.edit_key;
    this.tableData[num]</span>=<span style="color: #000000;">this.province
  },
  cancel:function () {
    this.$emit(</span><span style="color: #800000;">'</span><span style="color: #800000;">cancel</span><span style="color: #800000;">'</span><span style="color: #000000;">,this.state)
  }
}

}

</script>
<style scoped>

#forms{

width: 100%;

height:100%;

background-color: rgba(235,235,235,0.5);

position: absolute;

top: 0;

left: 0;

}

.box{

margin: 0 auto;

margin-top: 200px;

width: 400px;

height: 300px;

background-color: white;

padding: 20px 30px;

}

.box .el-col{

margin-bottom: 20px;

}

.box input{

width:300px ;

height: 30px;

}

</style>

forms.vue代码

　　2，效果图

　　　　上面完成了表格的增删改查功能。在tables组件中我用了axios向一个接口发送了请求，拿回很多省份的信息。tables组件和forms组件间实现了数据双向传递。从这个小小案例中基本反映出所有的功能，无论是多么大的页面，或者说有多少个组件；不管有多少个路由，你只需要添加路由列表和组件之间嵌套就可以实现任何东西了；任何组件都可以成为父组件，只要你往其中添加子组件就行；也都可以成为子组件，你只要把它添加到其他组件中既可；任何组件都也可以通过一个路由访问到，你只需给这个组件添加一个路由关系既可。

分类: vue_drf前后端分离项目

<div id="blog_post_info">

好文要顶关注我收藏该文

W的一天
关注 - 18
粉丝 - 34

+加关注

<div class="clear"></div>
<div id="post_next_prev">

<a href="https://www.cnblogs.com/12345huangchun/p/10527483.html" class="p_n_p_prefix">« </a> 上一篇：    <a href="https://www.cnblogs.com/12345huangchun/p/10527483.html" title="发布于 2019-03-21 17:42">RabbitMQ消息队列</a>
<br>
<a href="https://www.cnblogs.com/12345huangchun/p/10580520.html" class="p_n_p_prefix">» </a> 下一篇：    <a href="https://www.cnblogs.com/12345huangchun/p/10580520.html" title="发布于 2019-03-23 09:58">爬虫之抓取js生成的数据</a>

posted @ 2019-11-20 16:18 cmap 阅读(88) 评论(0) 收藏举报

刷新页面返回顶部

cmap

vue项目的搭建

一、Vue自动化工具的安装

1，安装nvm

2，安装node

3，安装npm

4，安装Vue-cli

二、使用Vue-CLI创建项目

三、项目目录结构和执行流程

1，目录结构

2，执行流程

四、初始化项目

1，清除页面上默认存在的东西，还原得到一个空白的页面

2，安装路由vue-router

3、引入ElementUI

4，引入axios

五、创建一个组件

1，在components文件夹中创建一个后缀为vue的文件

2，添加路由列表

六、创建子组件，添加到其他组件中，完成组件嵌套

1，也是要创建组件

2，把子组件引入到其他组件中，我把forms组件引入到tables组件中去

七、效果

1，代码

2，效果图

公告

　　一、Vue自动化工具的安装

　　1，安装nvm

　　2，安装node

　　3，安装npm

　　4，安装Vue-cli

　　二、使用Vue-CLI创建项目

　　三、项目目录结构和执行流程

　　1，目录结构

　　2，执行流程

　　四、初始化项目

　　1，清除页面上默认存在的东西，还原得到一个空白的页面

　　2，安装路由vue-router

　　3、引入ElementUI

　　4，引入axios

　　五、创建一个组件

　　1，在components文件夹中创建一个后缀为vue的文件

　　2，添加路由列表

　　六、创建子组件，添加到其他组件中，完成组件嵌套

　　1，也是要创建组件

　　2，把子组件引入到其他组件中，我把forms组件引入到tables组件中去

　　七、效果

　　1，代码

　　2，效果图