Vue之项目搭建

痛定思痛。 2022-01-08 01:49 486阅读 0赞

## 　　一、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][https_github.com_coreybutler_nvm-windows_releases]

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

![1519076-20190321191103711-2126071301.png][]

常用的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 项目名

![1519076-20190321193332079-66486674.png][]

![1519076-20190321193637181-336424749.png][]

![1519076-20190321193801391-2075253891.png][]

![1519076-20190321193859281-578306495.png][]

![1519076-20190321194002322-773901458.png][]

访问提供的地址：

![1519076-20190321194054705-462616970.png][]

项目创建完成。

// 生成一个基于 webpack 模板的新项目
    vue init webpack 项目名
    
    // 启动开发服务器 
    cd myproject
    npm run dev           # 运行这个命令就可以启动node提供的测试http服务器
    
    ctrl+c 停止服务器

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

### 　　1，目录结构 ###

用pycharm打开项目：

![1519076-20190321194716286-593302746.png][]

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文件夹中的其他单文件组件。

![1519076-20190321195421685-1083081433.png][]

## 　　四、初始化项目 ##

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

1.1 删除helloworld组件

![1519076-20190321200013633-1006975371.png][]

1.2 清除App.vue下的样式

## ![1519076-20190321200851935-917584.png][] ##

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

![1519076-20190321201320431-93681241.png][]

### 　　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中

![1519076-20190321202040876-51798563.png][]

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

![1519076-20190321202158227-1040276068.png][]

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

### 　　3、引入ElementUI ###

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

3.1 快速安装elementUI

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

3.2 配置elementUI

在main.js文件中写入：

![1519076-20190321202943392-1049277760.png][]

### 　　4，引入axios ###

4.1 下载axios

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

4.2 配置axios

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

![1519076-20190321203359839-318238123.png][]

## 　　五、创建一个组件 ##

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

![1519076-20190321205154306-1078241124.png][]

<template>
      <div>
        //在这写html
      </div>
    </template>
    
    <script>
      export default {
        name:'home',
        data:function () {
          return {
             // 这里是data数据
          }
        }
      }
    </script>
    
    <style scoped>
    //这里写css代码
    </style>

### 　　2，添加路由列表 ###

在index.js文件中写入：

![1519076-20190321210020627-1676396036.png][]

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

### 　　1，也是要创建组件 ###

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

![1519076-20190321210330329-1807186461.png][]

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

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

![1519076-20190321211041338-130938595.png][]

## 　　七、效果 ##

### 　　1，代码 ###

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<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代码

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<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=0;
            if (this.tableData.length==0){
               value=1
            }
            else {
                value=this.tableData[this.tableData.length-1].id+1;
            }
            this.province['id']=value;
            this.tableData.push(this.province);
            this.cancel();
          },
          save:function(){
            this.cancel();
            let num=this.edit_key;
            this.tableData[num]=this.province
          },
          cancel:function () {
            this.$emit('cancel',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，效果图 ###

![1519076-20190321211729682-165324140.png][]

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

转载于:https://www.cnblogs.com/12345huangchun/p/10574161.html

[https_github.com_coreybutler_nvm-windows_releases]: https://github.com/coreybutler/nvm-windows/releases
[1519076-20190321191103711-2126071301.png]: /images/20211220/d425024f36be49c09c870effe348d7f5.png
[1519076-20190321193332079-66486674.png]: /images/20211220/bfbf8fe9b76b4342a6d9f61c7271ab94.png
[1519076-20190321193637181-336424749.png]: /images/20211220/adfe31d55b87420387aa590a300e8a0a.png
[1519076-20190321193801391-2075253891.png]: /images/20211220/f9bf7baf952943c9ab9f4863c344aa50.png
[1519076-20190321193859281-578306495.png]: /images/20211220/5415572718504732838af88534c10ce7.png
[1519076-20190321194002322-773901458.png]: /images/20211220/80b1188738da4d55839350ef6aa96830.png
[1519076-20190321194054705-462616970.png]: /images/20211220/69b07336d43643f681266c6a45d5507e.png
[1519076-20190321194716286-593302746.png]: /images/20211220/1880d6f9dc504968882eae37e848cb3a.png
[1519076-20190321195421685-1083081433.png]: /images/20211220/6c232a8567f74976b5ca79492c6c717d.png
[1519076-20190321200013633-1006975371.png]: /images/20211220/c3fd17824ff0426a81e8b7352629a928.png
[1519076-20190321200851935-917584.png]: /images/20211220/8051980941fe41a2b679960ad65887ad.png
[1519076-20190321201320431-93681241.png]: /images/20211220/ea839278d72744fea1ae7a413958af38.png
[1519076-20190321202040876-51798563.png]: /images/20211220/9c331a8a846c45aea1fed659d7a0562e.png
[1519076-20190321202158227-1040276068.png]: /images/20211220/5a195b0a9c47416888d4a9964c520e3c.png
[1519076-20190321202943392-1049277760.png]: /images/20211220/a921076b182f49268ba01a883412f507.png
[1519076-20190321203359839-318238123.png]: /images/20211220/7696c1d0db884725bf14dc7907ef7de3.png
[1519076-20190321205154306-1078241124.png]: /images/20211220/f220da0924e44c4898766490e3fafe81.png
[1519076-20190321210020627-1676396036.png]: /images/20211220/c72b6f4d8ed248f193188e8e797cc279.png
[1519076-20190321210330329-1807186461.png]: /images/20211220/276296a3331241329165bf9c1a3c2c6a.png
[1519076-20190321211041338-130938595.png]: /images/20211220/9632ef153d5c47e3a6f1bd13770b8f03.png
[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211220/87aa49c25c544e06a9630e0d2ff986d8.png
[1519076-20190321211729682-165324140.png]: /images/20211220/a152d970a0eb459691bf10ca7d7c8b3e.png