专栏首页生南星vue搭建项目及配置

vue搭建项目及配置

文章很长,希望能给vue初学者一些小小的帮助。

一. 搭建一个完整的vue项目

1. 安装node环境

① 下载地址为:https://nodejs.org/en/

  ② 检查是否安装成功:cmd输入命令 node -v 或者 npm -v, 如果输出版本号,说明我们安装node环境成功。

2. 为了提高我们的效率,可以使用淘宝的镜像:http://npm.taobao.org/(可省略)

 ① 输入:npm install -g cnpm –registry=https://registry.npm.taobao.org,即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了。

② 检查是否安装成功:cmd输入命令 cnpm -v ,不报错即为安装成功。

( 如果此处安装淘宝的镜像,下面命令的 npm 都由 cnpm 代替 )

3. 搭建vue项目环境

 ① 全局安装vue-cli npm install --global vue-cli

② 进入你的项目目录,创建一个基于 webpack 模板的新项目: vue init webpack 项目名

后面将会有问题,需要确认敲回车,具体命令及意思如下所示:

Vue build ==> 打包方式,回车即可;

Install vue-router ==> 是否要安装 vue-router,项目中肯定要使用到 所以Y 回车;

Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车;

Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车;

Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车;

4. 进入项目:cd 项目名,安装依赖 npm i

 安装成功后,项目文件夹中会多出一个目录: node_modules

5. npm run dev 或者 npm run start,启动项目

二. vue项目目录讲解

1、build:构建脚本目录

    1)build.js ==> 生产环境构建脚本;

    2)check-versions.js ==> 检查npm,node.js版本;

    3)utils.js ==> 构建相关工具方法;

    4)vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加前缀;

    5)webpack.base.conf.js ==> webpack基本配置;

    6)webpack.dev.conf.js ==> webpack开发环境配置;

    7)webpack.prod.conf.js ==> webpack生产环境配置;

  2、config:项目配置

    1)dev.env.js ==> 开发环境变量;

    2)index.js ==> 项目配置文件;

    3)prod.env.js ==> 生产环境变量;

   3、node_modules:npm 加载的项目依赖模块

   4、src:这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:

    1)assets:资源目录,放置一些图片或者公共js、公共css。这里的资源会被webpack构建;

    2)components:组件目录,我们写的组件就放在这个目录里面;

    3)router:前端路由,我们需要配置的路由路径写在index.js里面;

    4)App.vue:根组件;

    5)main.js:入口js文件;

  5、static:静态资源目录,如图片、字体等。不会被webpack构建

  6、index.html:首页入口文件,可以添加一些 meta 信息等

  7、package.json:npm包配置文件,定义了项目的npm脚本,依赖包等信息

  8、README.md:项目的说明文档,markdown 格式

  9、.xxxx文件:这些是一些配置文件,包括语法配置,git配置等

三. Webstorm下配置node环境

全局安装完node,会发现Webstorm的命令行无法使用node命令,这时候就需要在Webstorm里配置node环境。

1. File -> Settings->?(node.js)->Node.js and NPM

2. Node interpreter -> ? -> Add... -> Add Local -> node.js的绝对路径,如下图:

如果仍然不可以,记得重启一下你的Webstorm哦!

注:定位到安装目录后不做任何操作Package不会有那么多内容

四. vue中如何使用less

① 安装less依赖,npm install less less-loader --save

② 修改 webpack.base.conf.js 文件,配置 loader 加载依赖,让其支持外部的less,在原来的代码上添加

 module: {
    rules: [
   
        {
          test: /\.less$/,
           loader: "style-loader!css-loader!less-loader",
        },
        
    ]
  },

现在基本上已经安装完成了,然后在使用的时候在style标签里加上lang=”less”里面就可以写less的代码了(style标签里加上 scoped 为只在此作用域 有效)。或者

@import './index.less'; //引入全局less文件

html中直接引入:

<link rel="stylesheet/less" type="text/css" href="文件路径/styles.less">
<script src="文件路径/less.js" type="text/javascript"></script>

五. vue移动端适配插件lib-flexible

① 安装插件 lib-flexible:npm i lib-flexible --save-dev

② 在main.js中引入lib-flexible:import 'lib-flexible/flexible'

css 可将单位转换为 rem:

<style lang="less" scoped>
    @wid : 75;
    .home{
        width: 100vw;
        height: 100vh;
    }
    .home .top{
        width: 100vw;
        height: 537rem/@wid;
        background: url("../assets/home1.png") no-repeat;
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
    }
</style>

六. vue项目中 import '@/components/order' 中 @ 是什么意思

大家在写vue项目时是否会经常遇到类似 import order from '@/components/order' 的代码?有没有和我一样的疑虑:@ 到底指代什么呢?

@ 是自行配置的一个 alias,默认是从 src 目录开始查找,也可以自己配置一些其它路径或者符号,根目录的别名,可以自行在 webpack.base.conf.js 里面的 alias 去设置:

resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
    'vue$': 'vue/dist/vue.esm.js',
    '@': resolve('src'),
  }
},

七. 自定义border的长度 样式 -- after 伪类

不论是vue项目还是原生,我们有时会遇到需要更改一个边框的多种样式,就像这种情况:

这是一个我自己手写的步骤条,他需要虚线变成实线,而且是一定长度,那我们怎么办呢?使用 after伪类 创建了一个有长度的右边框,通过定位将虚线框遮盖起来,从而达到效果。

.left{
     width: 69rem/@wid;
     border-right: 2px #B5B4B4 dashed;
     position: relative;
      &:after {
          content: '';
          position: absolute;
          top: 0;
           left: 69rem/@wid;
           /*改变高度决定步骤条的颜色变化*/
           height: 122rem/@wid;
           border-right: 2px solid #B5B4B4;
     }
  }

拓展:css中的伪类

css3为了区分伪类和伪元素,伪元素采用双冒号写法。

常见伪类——:hover,:link,:active,:target,:not(),:focus。

常见伪元素——::first-letter,::first-line,::before,::after,::selection。

::before和::after下特有的content,用于在css渲染中向元素逻辑上的头部或尾部添加内容。

这些添加不会出现在DOM中,不会改变文档内容,不可复制,仅仅是在css渲染层加入。所以不要用:before或:after展示有实际意义的内容,尽量使用它们显示修饰性内容,例如图标。

(::before和::after必须配合content属性来使用,content用来定义插入的内容,content必须有值,至少是空。默认情况下,伪类元素的display是默认值inline,可以通过设置display:block来改变其显示。)

举例:网站有些联系电话,希望在它们前加一个icon☎,就可以使用:before伪元素,如下:

<!DOCTYPE html>
<meta charset="utf-8" />
<style type="text/css">
    .phoneNumber::before {
    content:'\260E';
    font-size: 15px;
}
</style>
<p class="phoneNumber">12345645654</p>
// ☎12345645654

详细参考博客:https://www.cnblogs.com/mycoke/p/6056187.html

八. vue发起网络请求 -- 封装

( 如果不想要封装请去参考博客:https://www.kancloud.cn/wsj-/vue/645840 )

接口是这样的:

1. 进入根目录,安装 axios 模块

npm install axios -S

2. 封装请求。新建 http.js 文件,并在 mian.js 中引入。

请求的 url 与终端类型 不同时需要在 http.js 文件中修改 网络请求地址 与 终端类型。

import Vue from 'vue';
import axios from 'axios';

Vue.config.baseHttpUrl = 'https://dongjiang.ykelai.com/bcrm/admin.php';    //网络请求地址
Vue.config.platform = 'merchandiser';                    //终端类型

// axios 配置
axios.defaults.timeout = 10000;                    //网络请求超时时间
axios.defaults.baseURL = Vue.config.baseHttpUrl;            
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=utf-8';

// http request 拦截器
axios.interceptors.request.use(
    config => {
        config.headers = {'Content-Type': 'application/json;charset=utf-8','Access-Control-Allow-Origin':'*'}
        return config;
    },
    err => {
        return Promise.reject(err);
    });

Vue.prototype.axios = axios;
Vue.prototype.post = function(obj){
  const _this = this;
  obj.data.platform = Vue.config.platform;
  axios.post('',obj.data)
  .then(function (response) {
    try{
      if(obj.success && typeof obj.success == 'function'){
        if(response.data.code == 999){
          _this.$router.replace({path:'/'})
        }else{
          obj.success(response.data)
        }
      }else{
        throw "function 'success' undefind or it's not a function: This HttpRequest has no 'success' methods"
      }
    }
    catch(err){
      console.log('err',err);
    }
    
  })
  .catch(function (error) {
    if(obj.fail && typeof obj.fail == 'function'){
      obj.fail(error)
    }else{
      obj.fail = function(error){
        console.log('error',error);
        alert('网络请求错误');
      }
    }
  });
}

引入 main.js :

import http from './http/http'

3. 发起请求(样式代码就不放了)

<template>
    <!--登录注册-->
    <div class="regist">
        <div class="reg">
            <h2>你好,欢迎登陆</h2>
            <div class="phone">
                <img src="../assets/reg1.png" alt="">
                <input type="text" placeholder="请输入手机号码" v-model="user">
            </div>
            <div class="passwd">
                <div class="left">
                    <img src="../assets/reg2.png" alt="">
                    <input :type="passwd" placeholder="请输入密码" v-model="pass">
                </div>
                // 三目运算符的使用,控制密码是显示还是小圆点
                <img src="../assets/reg3.png" alt="" class="right" @click="passwd = passwd == 'password'? 'text': 'password'">
            </div>
            <div class="btn" @click="userRegist()">登&nbsp;录</div>
            <div class="handle">
                <div>
                    <span>账号注册</span>
                    <img src="../assets/right2.png" alt="">
                </div>
                <div>
                    <span>忘记密码</span>
                    <img src="../assets/right2.png" alt="">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "regist",
        data(){
            return{
                passwd: 'password',
                user: '',
                pass: ''
            }
        },
        methods:{
            userRegist:function () {
                this.post({
                    data:{
                        request: 'public.auth.login_from_password',
                        username: this.user,
                        password: this.pass
                    },
                    success: res =>{
                        console.log(res);
                    }
                })
            },
        }
    }
</script>

九. vue项目去掉地址栏中的 # 及 打包编译后遇到的问题

vue项目运行后url都会有一个 # 号,那如何去掉 # 呢?可以使用 history模式,只要在router->index.js加一行代码。代码如下:

export default new Router({
    mode: 'history',
})

是不是很简单呢,但是它也有它的问题。使用这个模式,在开发阶段一切都是正常的,可是打包之后,访问项目会发现页面一片空白的情况,解决办法如下:

A:很多项目都放在了服务器根目录下面,访问后的url就是:http://123.com。

但是我们经常都会新建目录,此时的 url 就会变成 http://123.com/nice/app。那怎么办呢?

B:假如我的打开地址是:http://123.com/nice/app,配置了模块,或者放置在了子文件夹下面,那么就会出问题。其实,这是因为router无法找到路径中的组件,所以也就无法渲染了。只需要修改router中的index.js,加一个基础路径就可以了。

export default new Router({
    mode: 'history',
    base: '/nice/app/'
})

十. vue项目按需加载路由 and vue 引入本地js

大家都知道在router->index.js里这样写:

import Home from '@/components/Home'
export default new Router({
  routes: [
   {
        path : ‘/’,  //到时候地址栏会显示的路径
        name : ‘Home’,
        component :  Home   // Home是组件的名字,这个路由对应跳转到的组件。。注意component没有加“s”.
    },
 })

但是这样写是一开始所有路由会全部加载,那么我们如何按需加载路由呢,代码如下:

// router->index.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router);

export default new Router({
  routes:[
      {path: '/', name: 'regist', component: (resolve) => require(['../components/regist'], resolve)},
      {path: '/home', name: 'home', component: (resolve) => require(['../components/home'], resolve)}
  ]
})

vue 项目引入本地 js文件 需要在项目下的 index.html 文件里的 body 加如下代码:

<script src="./static/js/jweixin-1.0.0.js"></script>

十一. router-link 与 v-for 使用的坑

<div id="app">
      <router-link v-for="item in items" to="'/' + item.id" 
      :key="item.id">{{item.content}}</router-link>
 </div>

结果发现router-view并没有渲染。并且我发现把router-link里面的to写死,即to="/home"或者to="/overview"就能够渲染,但这并不是我想得到的效果。查阅官方文档后得到解决方案。

首先,我们需要把 to 改成 :to 即 v-bind:to 的缩写,然后可以根据 path 或 name 来进行设置。下面给出代码示例:

<router-link v-for="item in items" :to="{path: '/' + item.id}" 
      :key="item.id">{{item.content}}</router-link>
<router-link v-for="item in items" :to="{path: item.id}" 
      :key="item.id">{{item.content}}</router-link>
<router-link v-for="item in items" :to="{name: item.id}" 
      :key="item.id">{{item.content}}</router-link>

十二. vue中使用go()和back()两种返回上一页的区别

vue 项目我们经常需要用到返回上一页的操作,经常用的是 go( )和 back() 方法,那么这两种方法有什么区别呢:

  • go(-1): 原页面表单中的内容会丢失;

history.go(-1):后退+刷新;

history.go(1) :前进

  • back(): 原页表表单中的内容会保留;

history.back():后退 ;

history.back(0) 刷新;

history.back(1):前进

十三. vue跳转的两种方法

  • 标签跳转
<router-link to='two'><button>点我到第二个页面</button></router-link>
  • 点击事件跳转
html :
<button @click="hreftwo" class="test-one">点我到第二个页面</button>
js   :
methods:{
    //跳转页面
    hreftwo(){
    this.$router.push({path:'/two'})
   }
}

十四. vue.js实现选项卡的切换效果

vue 项目中我们经常需要用到选项卡的效果,vue非常灵活,方法不止这一种,我给的示例代码,是我认为最好理解的方法,有兴趣的可以去度娘搜一下哦,话不多说,上代码。

html:

<div id="app">
  <div class="tab">
    <a href="#" @click="tabId=0" class="{tabId=0}">前端框架</a>
    <a href="#" @click="tabId=1" class="{tabId=1}">Vue</a>
    <a href="#" @click="tabId=2" class="{tabId=2}">Angular</a>
    <a href="#" @click="tabId=3" class="{tabId=3}">React</a>
  </div>
  <div class="box">
    <div v-show="tabId===0">111</div>
    <div v-show="tabId===1">222</div>
    <div v-show="tabId===2">333</div>
    <div v-show="tabId===3">444</div>
  </div>
</div>

css:

<style>
  *{
    margin: 0;
    padding: 0;
  }
  #app{
    width: 800px;
    margin: 0 auto;
  }
  a{
    text-decoration: none;
    height: 50px;
    width: 25%;
    background-color: lightblue;
    float: left;
    line-height: 50px;
    text-align: center;
  }
  .box{
    border: 1px solid #ccc;
    height: 400px;
  }
</style>

js:

<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
  new Vue ({
  el:'#app',
  data:{
    tabId:1
  }
})
</script>

此方法通过变量 tabId 的值的判断来显示不同的内容并进行选项卡的样式切换,代码少,浅显易懂。

十五. vue h5移动端禁止缩放

vue 移动端项目在连续点击时,有时候会出现页面的缩放,这时我们需要禁止页面的缩放,具体代码:

1. 安卓:项目目录 -> index.html

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

2. ios:项目目录 -> src -> App.vue

<script>
window.onload = function() {
  document.addEventListener('touchstart', function(event) {
    if (event.touches.length > 1) {
      event.preventDefault()
    }
  })
  document.addEventListener('gesturestart', function(event) {
    event.preventDefault()
  })
}
</script>

十六. vuex下state数据的存储

vuex是什么我之前也有写过,忘记的小伙伴们记得去看哦:生南星->全栈随笔->三大框架-> VueX详解。今天具体说一下 vuex 下 state 数据的存取。

1. vuex 下 state 数据的存储:

a. 项目目录 -> 新建store 目录 -> 新建 store.js 文件

import vuex from 'vuex'
import Vue from 'vue'
Vue.use(vuex)
export default new vuex.Store({
    /*state必须*/
    state:{
        user:{}
    },
    mutations:{
        setUser(state,v){
            state.user=v;
        }
    }
})

b. 项目入口文件: 项目目录 -> src -> main.js 加如下代码:

import store from './store/store'

new Vue({
  el: '#app',
  router,
  // 我是需要加的那句代码-----
  store:store,
  template: '<App/>',
  components: { App }
})

c. 使用页面的数据存储

 methods: {
    loginUser () {
       this.$store.commit('setUser',this.user)
    }
  }

注:this.$store.commit('setUser',this.user) 中的 setUser 要和 store.js 文件中的 mutations 中的方法相同。setUser方法中的 v 即是页面中想要存储的 this.user

2. 页面取 vuex 中的数据

a. 在插值表达式中用 $store.state.count 来获取

<div>{{$store.state.count}}</div>

以下三种方法,都需要依赖vue的computed计算属性来实现。

因为:在vue的实际应用中,computed属性可以在输出前,对data中的值进行改变,因此,我们就是利用computed的这一特性,在组件中获取vuex的state对象中的属性。

b. 在computed中定义一个方法,并return出 state 对象中的属性及其状态:

<div>{{count}}</div>

computed:{
   count(){
      return this.$store.state.count;
   }
}

这里需要说明的是:因为store之前已经在mian.js中进行了全局引入,因此,在vue的组件中,就可以使用 this.$store 来调用,其中this代表Vue的实例(不可省略)。

c. 利用vuex的mapState方法来获取vuex的state对象中属性,它有两种写法:

1). (mapState中用对象的形式获取):

首先在组件中引入vuex的mapState方法, 然后在computed中这样写:

<div>{{count}}</div>

import { mapState } from 'vuex'

computed:{
    ...mapState({
        count:state => state.count   //使用ES6的箭头函数来给count赋值
    })
}

2). (mapState中用数组的形式获取):

同样,需要先在组件中引入vuex的mapState方法, 然后在computed中这样写:

<div>{{count}}</div>

import { mapState } from 'vuex'

computed:{
    ...mapState(['count'])
}

十七. vue项目打包(解决背景图片不显示问题)

vue项目打包总是能遇到这样那样的问题,最常见的问题莫过于图片不显示,我之前写过详细的vue项目打包步骤及部署到服务器上的步骤,感兴趣的朋友可以去看一下,生南星->全栈随笔->三大框架->vue项目简书(三)--打包部署就可以查看喽(或者后台直接回复:vue打包部署

),好啦,言归正传,背景图片显示不出来该怎么办呢?

1. 将绝对路径改为相对路径。目标文件:项目目录 > config文件夹 > index.js

build:{
  assetsPublicPath:'/' 改为:assetsPublicPath:'./'   (加一个点变为相对路径)
}

2. 配置背景图片路径 -- 打包后的css文件夹内app.css文件访问static/img/’图片名’路径错误访问不到图片,在build->utils.js 中配置路径。目标文件:项目目录 > build文件夹 >utils.js. 在下面所示位置添加代码 publicPath:'../../',

// Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        // 我是刚被添加额那句代码
        publicPath:'../../',
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

十八. input text 设置 disabled 单击事件不响应,怎么办?

将 disabled 换成 readonly 就好了。

拓展:

HTML <input> 标签的 readonly 属性规定输入字段为只读。

只读字段是不能修改的。不过,用户仍然可以使用 tab 键切换到该字段,还可以选中或拷贝其文本。

readonly 属性可以防止用户对值进行修改,直到满足某些条件为止(比如选中了一个复选框)。然后,需要使用 JavaScript 消除 readonly 值,将输入字段切换到可编辑状态。

十九. vue 项目 storage 本地存储

1. 封装:项目 -> src -> 新建目录 utils -> 新建 storage.js 文件

    var u = {};
    var isAndroid = (/android/gi).test(navigator.appVersion);
    var uzStorage = function(){
        var ls = window.localStorage;
        if(isAndroid&&typeof os != 'undefined'){
           ls = os.localStorage();
        }
        return ls;
    };
export default {
    setStorage:function(key, value){
        if(arguments.length === 2){
            var v = value;
            if(typeof v == 'object'){
                v = JSON.stringify(v);
                v = 'obj-'+ v;
            }else{
                v = 'str-'+ v;
            }
            var ls = uzStorage();
            if(ls){
                ls.setItem(key, v);
            }
        }
    },
    getStorage:function(key){
        var ls = uzStorage();
        if(ls){
            var v = ls.getItem(key);
            if(!v){return;}
            if(v.indexOf('obj-') === 0){
                v = v.slice(4);
                return JSON.parse(v);
            }else if(v.indexOf('str-') === 0){
                return v.slice(4);
            }
        }
    },
    rmStorage:function(key){
        var ls = uzStorage();
        if(ls && key){
            ls.removeItem(key);
        }
    },
    clearStorage:function(){
        var ls = uzStorage();
        if(ls){
            ls.clear();
        }
    }
}
// console.log(u)

2. 在需要存储数据的页面调用 setStorage() 方法, 例如,登录页存储 token:

methods:{
  userRegist:function () {
     this.post({
          data:{
             request: 'public.auth.login_from_password',
             username: this.user,
             password: this.pass
          },
          success: res =>{
            if(res.code === 0){
               this.$router.push({path:'/home'});
               this.$storage.setStorage('token',res.token)
            }else {
              alert(res.msg || '网络错误!');
           }
        }
    })
  },
}

3. 在需要取数据的页面调用 getStorage() 方法,例如其他页面需要向后台发送 token 请求数据

methods:{
  searchOrder:function () {
    this.post({
      data:{
          request: 'private.purchase.get_purchase_order_list',
          token: this.$storage.getStorage('token'),
       },
       success: res => {}
    })
  },
}

注:storage.js 文件 中的 rmStorage() 方法用来移除已经存储的但是不需要的数据;clearStorage() 方法用来清除本地存储的所有数据。

文章到这里大概就结束了,最后再送一句我最近看到的话吧:成功不是将来才有的,而是从决定去做的那一刻起,持续累积而成。

本文分享自微信公众号 - 生南星(gh_36d61425a5dc),作者:生南星

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-08-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue-awesome-swiper 相关问题

    Swiper常用于移动端网站的内容触摸滑动,它是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端,以及PC端网站。Swiper能实现触屏焦...

    生南星
  • 小小结( 二 )

    1.1 js同步执行与异步执行 js的执行机制:js是单线程环境,从上到下、依次执行,即 同步执行;在这段代码中,for循环是同步代码,setTimeout是异...

    生南星
  • vue项目小点(二)

    1.解决使用vue-awesome-swiper组件分页器pagination样式设置失效问题

    生南星
  • 三、VueJs 填坑日记之项目文件认识

    上一篇博文,我们搭建了一套基础的vuejs的环境,首先安装node.js,然后利用npm包管理器,安装vue-cli,设置淘宝镜像,初始化项目,安装依赖,运行。...

    I Tech You_我教你
  • Require.js

    通过require.js 可以对javascript文件进行别样引用 Require.js的使用: 第一步: 只需在html页面中引用require.js ...

    河湾欢儿
  • Vue 全家桶、原理及优化简议

    使用过vue的程序员一般这样评价它,“vue.js兼具angular.js和react.js的优点”。Vue.js 是一个JavaScript MVVM(Mod...

    李艺
  • echarts 仪表盘三分钟上手及属性修改示例

    王小婷
  • 如何将Civil3D生成的道路模型导出至Infraworks

    本文共:641 字 12 图 预计阅读时间: 8 分钟 本文作者:同济大学BIM学生俱乐部成员李东帅 一、Civil3d处理过程 1. 生成道路曲面 右键——道...

    企鹅号小编
  • Vue2 全家桶仿 微信App 项目,支持多人在线聊天和机器人聊天

    这个项目是利用工作之余写的一个模仿微信app的单页面应用,整个项目包含27个页面,涉及实时群聊,机器人聊天,同学录,朋友圈等等,后续页面还是开发中。写这个项目主...

    IMWeb前端团队
  • Vue2 全家桶仿 微信App 项目,支持多人在线聊天和机器人聊天

    前言 这个项目是利用工作之余写的一个模仿微信app的单页面应用,整个项目包含27个页面,涉及实时群聊,机器人聊天,同学录,朋友圈等等,后续页面还是开发中。写这个...

    IMWeb前端团队

扫码关注云+社区

领取腾讯云代金券